angular create component – How to Create & Use Component in Angular 12?

angular create component is an argument and then the name of the component. we use the .component() method of an AngularJS module.

angular create component

All Angular CLI command starts with ng , generate or g is a command, To create a new component run: ng generate component [component-name]. also you can create an Angular generate component in folder

Create New App:

ng new pakainfo_v1

generate new component using following command:

ng g c popular

generate new component in angular 8 app

app/popular/popular.component.html

<h2>This is simple creating component Example - www.pakainfo.com</h2>
   
<p>popular works!</p>

app/popular/popular.component.css

p{ color:green }

app/popular/popular.component.ts

import { Component, OnInit } from '@angular/core';
     
@Component({ 
  selector: 'app-popular',
  templateUrl: './popular.component.html',
  styleUrls: ['./popular.component.css']
})
export class popularComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  }
   
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { popularComponent } from './popular/popular.component';
  
@NgModule({
  declarations: [
    AppComponent,
    PopularComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Don’t Miss : Angular Dynamic Creating Factory Components

Now you can use PopularComponent in your view file as like bellow:

<app-popular></app-popular>

You can also generate new component in inside some directory. You can try bellow command:

ng g c admin/users

I hope you get an idea about angular create component.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.