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