How to generate Angular component

In this post we will see how you can generate the Angular component with Angular CLI.

You can run the following command at your terminal

 ng generate component product-list

You will see following output in your terminal. This is the list of files generated when you generate the product-list component

CREATE src/app/product-list/product-list.component.css (0 bytes)
CREATE src/app/product-list/product-list.component.html (31 bytes)
CREATE src/app/product-list/product-list.component.spec.ts (664 bytes)
CREATE src/app/product-list/product-list.component.ts (292 bytes)
UPDATE src/app/app.module.ts (418 bytes)

Generated component has been located at src/app/product-list location and you can see four files. You have html file for the template, css files to write styles and component.ts file for you to write the functionality of the component

When you create the component with Angular CLI , components will be added to app.module.ts file. This file register all the component when the application is started

So you can see following code in src/app/app.component.ts file

...
import { ProductListComponent } from './product-list/product-list.component';

...
@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],

...

Now you can write following code in your src\app\app.component.html file to show the product-list component




   Hello World 


Button

September 10, 2018

Hello World