DEV Community 👩‍💻👨‍💻

Cover image for Components In Angular
haimantika mitra for Angular

Posted on • Updated on

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 👇
Component description

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 👇

Image description

  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

Top comments (8)

Collapse
lorenzojkrl profile image
Lorenzo Zarantonello

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

Collapse
haimantika profile image
haimantika mitra Author

Would love to know more about it.

Collapse
lukeshiru profile image
Luke Shiru • Edited on

Hi! Would you mind changing #programming with #angular? I (and other users) have #angular weight set to -1 so Angular posts don't show up on our feed, and when it doesn't have the correct tags we end up with unwanted posts in the feed.

Thanks!

PS: Also, ideally you should use code blocks instead of screenshots, like this:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'my-app';
}
Enter fullscreen mode Exit fullscreen mode
Collapse
haimantika profile image
haimantika mitra Author

Just changed it. Thanks 🙏🏾

Collapse
stevenlarsen profile image
Steven Larsen

informative post. thank you for this useful post.

Collapse
haimantika profile image
haimantika mitra Author

Thank you Steven :)

Collapse
yongchanghe profile image
Yongchang He

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

Collapse
haimantika profile image
haimantika mitra Author

Definitely! 🙏🏾

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.