Components in Angular

A Component is one of the main building blocks in angular application. The main aim of a component in your angular app should be to present data to the view template using data binding. Angular Components form the data structure of your application and have HTML templates that will be rendered to the web page.

The process through which components provide data to the HTML templates is called data binding.

The code shown below is a component:

Now, you can access title property from the Component using one of the data binding technique i.e String Interpolation {{ }}. We will learn data binding in-depth in this Angular Tutorial.

app.component.html

Code for your reference:



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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular app';
}

Component Decorator

In the above example of the component, there is a simple TypeScript class "AppComponent". Unless you add the decorator @Component to the TypeScript class, Angular does not know that it is a Component.

The Component decorator is the metadata that provides information about the Component to the Angular.

Create a Component using Angular CLI

Open a terminal in Visual Studio Code or the command prompt to run the command

ng generate component Navbar

ng g c Navbar [Shorthand syntax]

Note: Navbar is the component name.

Angular CLI creates these four files for you in the folder with the same name as the component.

navbar.component.css ----- For component styling
navbar.component.html ------ For writing the template for your component
navbar.component.spec.ts ------ for writing unit test cases for the component
navbar.component.ts ----- This file contains the component class

navbar.component.ts:



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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

@Component configurations options

selector:

The Component's selector tells Angular to insert an instance of the component, wherever it finds the tag in the Html template.

for example, In the newly created navbar.component.ts file, the component's selector name is "app-navbar". wherever Angular finds <app-navbar> tag, it will replace it with the navbar component's Html template.
templateURL: In this option, you can pass the path to the Html template of the component.
providers: This is an array of providers for the services that components need to inject.

Inline Template in the component:

Till now we have seen the TemplateURL in the component that has the path to the HTML template. But you can write inline Html in the component instead of giving the path to the Html file.

Instead of using the template URL option in the decorator, use the template option to write inline Html. To write multi-line Html, write Html between backticks (` ` ).

Note: Write the Inline Html template only if there are few lines of Html. Do not write complex Html in the Inline template.

MEAN Tutorials

Components in Angular