Angular 10 – Components

In this part, we would be looking at Angular Components. Then we also would extend our Welcome application by adding new components. We’ll cover the following:

1. What is a Component?
2. Component Metadata
3. Creating a Component
4. Nested Components

1. What is a Component?

A component is what what controls a patch of the screen called a view. Simply put, a component is a part of the UI. For instance the UI shown below can be thought of as made up of four components: header, footer, body and sidebar

From Figure 1, each component controls what would render in the corresponding part of the UI. Additionally, components can be nested within other components. We’ll discuss this is a later part.

Angular creates, updates and destroys components during the lifecycle of an application. This actions archived using the lifecycle hooks. An example is ngOnInit().

2. Component Metadata

In practice, an angular component is a class annotated with the @Component annotation. This class specified the component’s metadata. This metadata tells tell Angular where to get the building blocks of the component and its view. The component and the html template describes a view.

For example, open the app.component.ts file

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: []
})
export class AppComponent {
  title = 'Welcome';
}

In the code above, I have added the providers section manually. The component configuration options are explained below:

selector – the selector tell Angular to create and insert a component based on the tag provided in the html template. For instance, <app-root></app-root> inserts the app component in the index.html page. So open the index.html page and check to see.

templateUrl – this is the address of html template used by the component. This is given relative to the module.The html template could also be provided inline. This template defines the host view of the component

styleUrls – this is the address of the stylesheet that applies to the component’s template

providers: This section is populated if there are any services used by the component.

3. Creating a Component

Let’s create a new component. A component that would hold  a list of students. To create a component, use the command:

ng create component student

This command creates a component inside the app/directory. You can open and check. You’ll see that this component contains the four files discussed earlier.

To use this component in the index page, just add the selector

<app-student></app-student>

4. Nested Component

Components appearing in a view is normally arranged in hierarchical manner. In our Welcome application, we have two components: AppComponent and StudentComponent.

So we can make the StudentComponent a nested component of the AppComponent by adding the selector in the AppComponent template. In this case, the StudentComponent becomes a child of the AppComponent.

As a homework, create all the components to build the view shown in Figure 1.

In the next part, we’ll learn about Angular directives