Angular 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


    Ts file
    import {Component, Input, OnInit} from '@angular/core';
      selector: 'app-spinner',
      templateUrl: 'spinner.component.html',
      styleUrls: ['./spinner.component.scss']
    export class SpinnerComponent implements OnInit {
      @Input() info: string;
      constructor() { = || 'wait…';
      ngOnInit() {

    Html file