In this post, we will learn about components and how to create new components in an Angular 9 application using Angular CLI. We will create the required components for our application and will show how components can be used to organize the content of the application.

What Are Angular Components?

An angular application is built using multiple modular pieces/sections known as components. Every component defines its own HTML, CSS, and data to be displayed on the web page. When the component data is changed then the Angular application updates only that component without reloading the whole web page.

We can think of components as different sections of a web page. In a typical web page, we have a header, footer, and content sections. Similarly in an Angular application, a web page may have 3 components i.e. a header component, footer component, and content component. In most of the cases, the header and footer components remain the same throughout the application and only the content section is updated when the user clicks a particular menu item.

App Component

The app component is automatically created when we created a new Angular application using Angular CLI as we did in the previous post. The app component is comprised of 4 files like any other Angular component. The component files are available inside the folder ‘myapp/src/app’:

• app.component.css (used to define CSS styles for the component)
• app.component.html (used to define markup for the component)
• app.component.spec.ts (used to define tests for the component)
• app.component.ts (used to define and prepare data for the component)

Create New Angular Components

To create a new Angular component using Angular CLI, open the command prompt as an administrator and CD into the application folder. Then run the command:

ng generate component header

The above angular command will generate a new angular component named as the header. Go ahead and create two more components i.e. for content and footer sections.

ng generate component content
ng generate component footer

You can find the files of these newly generated components in the folder ‘myapp/src/app’.

In this post, we have learned about Angular components and how to create new Angular components using Angular CLI. In the next post, we will learn how to change the content of Angular components and how to merge these 3 components in the app component. Stay tuned!