Components In 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:

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

Creating a Component

1. Have Angular CLI installed. If not, use command npm install -g @angular/cli to install.
2. Create an Angular workspace using the command ng new <app-name>
3. Run ng generate component <component-name> to create a component
4. 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

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

1. @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

2. 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

3. Provider - Providers are passed as an array, and it helps in adding services in a component.

4. 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.

Thank you for reading till the end. In the next article, we will be cover Data Binding basics.

If you have any comments for me, please drop them below or reach out to me at @HaimantikaM

Comments

[Lorenzo Zarantonello]

Hi,
Would you like to collaborate on this? vitainbeta.org/2022/06/19/angular-...

[haimantika mitra]

Would love to know more about it.

[haimantika mitra]

Just changed it. Thanks 🙏🏾

[Steven Larsen]

informative post. thank you for this useful post.

[haimantika mitra]

Thank you Steven :)

[Yongchang He]

Thank you for sharing! I am learning React for now but I believe I will try this later.

[haimantika mitra]

Definitely! 🙏🏾

[om4rAb]

This is so helpful
thank you