Skip to main content

Work with Angular 13 components

Step 5 — Creating Angular 13 Components​

In this step, we'll proceed to create the Angular components that control our application UI.

Head back to a new command-line interface and run the following command:

$ cd ~/angular-httpclient-example
$ ng generate component home

This is the output of the command:

CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (467 bytes)

The CLI created four files for the component and added it to the declarations array in the src/app/app.module.ts file.

Next, let's create the about component using the following command:

$ ng generate component about

Next, open the src/app/about/about.component.html and add the following code:

<p style="padding: 13px;">
An Angular 13 example application that demonstrates how to use HttpClient to consume REST APIs
</p>

We'll update the home component in the following steps.

In the next step of our Angular 13 tutorial, we'll add these components to the router.