Latest Code Tutorials

Angular Components: The Complete Guide

Components are just regular TypeScript classes but with the Component Decorator. It differentiates the standard class from the component class.

Angular Components

Angular Component controls a patch of the screen called a view. For example, individual components define and control each view. When you install the project via Angular CLI, then by default, we get one Component that is an app component. 

Angular Components are the smallest pieces in the Angular Application. We can define the Components in the Typescript file.

If you analyze the app.component.ts file, you will see something like this.

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

Here Component is defined by a decorator @Component. It contains Metadata

Angular Application reads this and identifies this class as a component class.

Component = Class + Metadata + Template

So it is a combination of the above three terminologies.

// app.component.ts

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app';

In the above’s example, first, we have imported a Component module from the angular core module. Then we have defined the decorator and described the Metadata. Metadata contains three things.

  1. selector
  2. templateUrl
  3. styleUrls

So it described which selector this Component uses and what is the template URL is and what the Style URL. All the data are described in the Metadata.

Apart from Metadata, it contains a Typescript class. The class comprises properties and methods. It is an essential TypeScript class. We can access its property in the template.

In the above’s example, the title is the property, and we can access this property in the app.component.html file.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    Welcome to {{ title }}!


It defines an HTML tag. In the above’s example, the app-root is a selector, and we can use it as a tag in the HTML file.


It represents a view of the Component. We need to give the path of the HTML file. So, we can say it is the view of the MVC architecture. We can see the Component as a Controller, and we can also define the Model as a Data of the Component.


We give the path of the particular CSS file for a specific component.

New Angular Component Creation.

If you are using AngularCLI, we can hit the following command in the terminal to generate a new component.

ng g c start

It will generate the following files.

create src/app/start/start.component.html (24 bytes)
create src/app/start/start.component.spec.ts (621 bytes)
create src/app/start/start.component.ts (265 bytes)
create src/app/start/start.component.css (0 bytes)

Here, automatic Angular will register this Component for us in the app.module.ts file. So when we create a new component, we need to register in the file. Otherwise, it will not work.

// app.module.ts

import { StartComponent } from './start/start.component';

declarations: [

This Component has its view, CSS, and logic or controller file.

For more information, visit its Official Documentation.

See also

Angular architecture

Angular NgStyle

Angular NgClass

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.