Create component in angular

• Right click on App Folder under explorer. then click on Generate Component

•  Then enter Component name then click on enter button as below image.

• It will create about folder and under about folder it will create Component related files as below image.

• about.component.ts code as below

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

@Component({

  selector: 'app-about',

  templateUrl: './about.component.html',

  styleUrls: ['./about.component.css']

})

export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

• about.component.html code as below

<p>

  About component 

</p>

• Add about Component in app.module.ts file like below

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AboutComponent } from './about/about.component';

@NgModule({

   declarations: [

      AppComponent,

      AboutComponent

   ],

   imports: [

      BrowserModule,

      AppRoutingModule

   ],

   providers: [],

   bootstrap: [

      AppComponent

   ]

})

export class AppModule { }

• Include about component in app.component.html page like below.

<h1>Welcome to Angular Test project</h1>

<h2>Hi</h2>

<app-about></app-about>

Output: