Angular Components

The angular components are the basic building block of an angular application. The component will contain a class that will interact with its UI html file and displays the content.

By default, angular provides us with the default component, AppComponent which will act as the entry point.

Creating angular project

Create a new angular application using

ng new angular-component

Once the application is created you can find 4 files related to the default component.

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts

Introduction to AppComponent

The app.component.ts file is a class that is decorated with @Component with some metadata which makes the class behave like a component. Below is the default boilerplate code of app.component.ts.

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

The component decorator @Component will have the following metadata.

  • selector - It should be a unique name. This will replace the template of the component(app.component.html) in any .html file.
  • templateUrl - Its the location of the template usually its a html file.
  • styleUrls - Its the array of location to the stylesheets which will be applied to the app.component.html file.

Open the app.component.html file and modify the code as below

<h1>Welcome to Angular component tutorials</h1>

Run the application using

ng serve --o

The browser screen displays the html

Welcome to Angular component tutorials.

This is because we have set the AppComponent selector to load AppComponent initially in index.html.

<!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">

Lets create a new component and display it in AppComponent template.

Create a component named WelcomeComponent

Create a component using the following command.

ng g c welcome

Here, g stands for generate, c stands for component and welcome is the name of the component to be created.

The above component will create a WelcomeComponent. Open the welcome.component.ts file and a new variable title with the value Readersbuddy.

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

  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
export class WelcomeComponent implements OnInit {
  title = 'Readersbuddy';
  constructor() { }

  ngOnInit() {

Open the welcome.component.html file and modify the code as below.

<p>Welcome to {{title}}</p>

Using the interpolation({{}}) to display the value of the title variable in the HTML template.
It will produce the output

Welcome to Readers Buddy.

To use this, open the app.component.html file and add the selector tag of the WelcomeComponent.

<h1>Welcome to Angular component tutorials</h1>

Run the project

Run the app using

ng serve --o

To summarize, a component is the building block of an angular application. It can be used in three ways.

  • Referring inside an HTML template using a selector string.
  • It can be routed to the component which will act as separate page.
  • Can be loaded dynamically in any modal dialog.

Most Read