Angular Components

Components

It is the smallest individual unit and the basic building block of the Angular application. An angular component helps in maintaining the modularity of the application because they are reusable. The whole structure of the application is built using different components.

File Structure

An Angular component includes the below-mentioned files. The usage of those is defined below.

1. Html file - An angular component creates an HTML file which is the template. We can render the DOM elements in the HTML file and design our application.
2. TS file - The typeScript file contains all the behaviour of the component. All the actions that are required for a component are created here.
3. Style file - The style and CSS are rendered here.
4. Test file - All the test cases are written here.

Create command

Command to create a new angular component

ng generate component my-first-component

Example

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

@Component({
  selector: 'app-spinner',
  templateUrl: 'spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})

export class SpinnerComponent implements OnInit {

  @Input() info: string;

  constructor() {
    this.info = this.info || 'wait…';
  }

  ngOnInit() {

  }
}

<div>
 
  <mat-progress-spinner>
  </mat-progress-spinner>
 
  <p>
    {{info}}
  </p>

</div>