Components In Angular

#webdev #beginners #tutorial #angular

Hi readers 👋, thank you for spending few minutes of the day, reading my article.

I have recently started learning Angular and as the heading says, this is a beginner level series. As I proceed with my learning, I shall come up with some more articles and projects (if you see me away for more than 2 weeks, I probably need your help and motivation 🙏🏽).

In this article we will be covering basics of Components.

What is a Component?

Component are the most essential and important building blocks of Angular. It consists of:

An HTML file that declares what goes on the page (also called the template of the component)
A typescript class that defines behavior (also known as the component class)
A CSS selector that defines how the component is used

Creating a Component

Have Angular CLI installed. If not, use command npm install -g @angular/cli to install.
Create an Angular workspace using the command ng new <app-name>
Run ng generate component <component-name> to create a component
If it runs successfully, you should see:
- A folder named after the component
- A component file
- A template file
- A CSS file
- A testing specification file

This is what your workspace should look like, after running the above command 👇

Alternatively, you can also create a component manually, follow this tutorial to know more.

Getting into details

Open the file app.component.ts under your newly created component folder It should be similar to 👇

@Component is a decorator that identifies the class immediately below it as a component class, and specifies its metadata. The metadata for a component tells Angular where to get the major building blocks that it needs. The @Component decorator, can be used to set the values of different properties, some of which are:
- Template and TemplateURL
- Provider
- Selector
Template and TemplateURL- A template is the part of the component which gets rendered on the page. A template can be created in two ways:
- Inline template: Can be created using single or double quotes
- TemplateUrl property: Helps us in setting complex templates that are created in an HTML file
Provider - Providers are passed as an array, and it helps in adding services in a component.
Selector - It tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. In simple terms, a component can be used using this selector.