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

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.