Generating Component in Angular (Using CLI/Manually)

Creating a component using the Angular CLI

ng generate component <component-name>

By default, this command creates the following:

• A folder named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts

Where <component-name> is the name of your component.

Creating a component manually

To create a new component manually:

1. Navigate to your Angular project directory.
2. Create a new file, <component-name>.component.ts.

3. At the top of the file, add the following import statement.
   

   content_copyimport {Component } from '@angular/core';
   

4. After the import statement, add a @[Component](https://angular.io/api/core/Component) decorator.
   

   content_copy@Component({
   })
   

5. Choose a CSS selector for the component.
   

   content_copy@Component({
     selector: 'app-component-overview',
   })
   

   For more information on choosing a selector, see Specifying a component's selector.

6. Define the HTML template that the component uses to display information. In most cases, this template is a separate HTML file.
   

   content_copy@Component({
     selector: 'app-component-overview',
     templateUrl: './component-overview.component.html',
   })
   

   For more information on defining a component's template, see Defining a component's template.

7. Select the styles for the component's template. In most cases, you define the styles for your component's template in a separate file.
   

   content_copy@Component({
     selector: 'app-component-overview',
     templateUrl: './component-overview.component.html',
     styleUrls: ['./component-overview.component.css']
   })
   

8. Add a class statement that includes the code for the component.
   

   content_copyexport class ComponentOverviewComponent {
   
   }
   

Reference : Angular Component Overview