How to Create New Component in Angular

We will introduce components and how to create them in Angular.

Components in Angular

Components are the building block of an Angular application. An Angular application consists of multiple components or a tree of Angular components, and these components are associated with templates and a subset of directives.

We can easily create new components in Angular using the following command in CLI.

# angular CLI
ng generate component OurNewComponent

Or we can use shorthand commands in CLI.

# angular CLI
ng g c OurNewComponent

The command above will generate a new component named OurNewComponent, which will have four files and one folder named after the component.

The following files will be generated when creating a new component using the command above.

1. OurNewComponent.component.ts file is a component file.
2. OurNewComponent.component.html file is a template file for our component.
3. OurNewComponent.component.css file is a stylesheet file for our component.
4. OurNewComponent.component.spec.ts file is a testing specification file for our component.