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