Angular Component

Components are the primary building block for Angular applications. Every view page needs to create a Component in the Angular app. The component comprises three parts are:
        • Template
        • Class
        • Metadata

It represents the view. This is created using HTML and will be a user interface of our application.

It has code and is created by using TypeScript. It contains Data and Methods that can be used to control the logic of the view.

This is the information that Angular needs to decide if the class is a Component or a regular type. It is defined using a Decorator.  A Decorator is a function that provides information about the class and for components, we use the component Decorator @Component.





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

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

→ @Component is a Decorator that tells this class is a component class.
→ This class has a data property i.e, “ title ”.
→ “export” declarations are treated as a script whose contents are available in the global scope.
→ selector: ‘app-root’: It is a custom HTML tag that can be used to represent this component.You can see  this <app-root></app-root> tag is used index.html. So, that Angular render template is in its place.
→  templateUrl: ‘./app.component.html’: It points to an HTML file representing this component’s view.
→ styleUrls: [‘./app.component.css’]: It points to a CSS file that can be used for the styling template of this component.

<h1>{{ title }} app is running!</h1>
{{title}} is a property of the AppComponent class.


<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


→ <app-root></app-root> is a custom HTML  tag of AppComponent class. So, Angular renders the template of AppComponent.
Note: Every web page in Angular needs to create a Component.


Create a new Component:
Create a component through angular CLI using this command

ng generate component <component-name>

We can use the shortcut of this command

ng g c  <component-name> 

→ By default this command creates the following:
          • A folder <component-name>  under  “src/app”  in the app
          • A component file, <component-name>.component.ts 
          • A template file, <component-name>.component.html 
          • A CSS file, <component-name>.component.css
          • A testing file, <component-name>.component.spec.ts
→ The generated component will be automatically updated app.module.ts file 
We can generate a page component in this app:

..demo-app> ng generate component page

CREATE src/app/page/page.component.html (19 bytes)

CREATE src/app/page/page.component.spec.ts (612 bytes)

CREATE src/app/page/page.component.ts (267 bytes)

CREATE src/app/page/page.component.css (0 bytes)

UPDATE src/app/app.module.ts (467 bytes)

Our component is successfully created. We can check under the src/app folder in the application.


We can check if the PageComponent is updated on the app.module.ts file in our app.



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

  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
export class PageComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {


<p>page works!</p>

How can we add PageComponent to the view?
We can add a selector of PageComponent i.e., app-page tag to app.component.html which is the template view of the root component(AppComponent).

<div style="text-align: center">

<h1>{{ title }} app is running!</h1>

<!-- This is the selector name of the PageComponent -->



Use this command ng serve -o to run the app.



This topic is explained What is a Component? What are the parts of the Component? How to create a component? How to add a component to the view? What are the files created automatically when we use the “ng g c <component-name>” command?

Leave a Comment