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)

lorenzojkrl profile image
Lorenzo Zarantonello

Would you like to collaborate on this?

haimantika profile image
haimantika mitra

Would love to know more about it.

lukeshiru profile image
Luke Shiru • Edited

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.


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

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

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

Just changed it. Thanks ๐Ÿ™๐Ÿพ

stevenlarsen profile image
Steven Larsen

informative post. thank you for this useful post.

haimantika profile image
haimantika mitra

Thank you Steven :)

yongchanghe profile image
Yongchang He

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

haimantika profile image
haimantika mitra

Definitely! ๐Ÿ™๐Ÿพ