Building Nested Components In Angular -

Introduction

In this article, you’ll understand how to build components designed to be nested. within other components and will discover how to establish communication between the nested component and its container component.

We can nest a component within another component, and nest that component within yet another component. because each component is fully encapsulated. we expose specific inputs and outputs for communication between a nested component and its container. allowing them to pass data back and forth.

There are two ways to use a component and display the component’s template.

root directive

We can use a component as the directive. in the previous article, We saw how to use a component as a directive when we displayed. the AppComponent template in the index.html file.

<body>
 <pm-root></pm-root>
</body>

The pm-root directive is defined as the AppComponent selector. The template is then displayed within the directive tags. so, it appears to the user that they’ve traveled to another view. The template is then displayed in a full-page style view.

We’ll define a component as nestable if its template only manages a fragment of a larger view. if it has a selector so it can be used as a directive, and if it communicates with its container.

Building a Nested Component

In this example of a component that is nestable. It wants to use the nestable component in its template. We then refer to the outer component as the container or parent component, and we refer to the inner component as the nested, or child component. When building an interactive application. the nested component often needs to communicate with its container. The nested component receives information from its container using input properties. and the nested component outputs information back to its container by raising events.

In our sample application, we want to add the 5 Star Rating. Displaying the rating number using a visual representation such as stars makes it quicker and easier for the user to interpret the meaning of the number.

Add nested component

The nested component we’ll build in this module. For the star component to display the correct number of stars, the container must provide the rating number to our star component as an input. And if the user clicks on the stars, we want to raise an event to notify the container. Let’s jump right in and build our star component. When we last saw our sample application, we had completed the car list component.

//car-list-component.html

<div class='table-responsive'>
	<table class='table' *ngIf='car.Price > 50000' >
    <tr *ngFor='let car of cars'>
		<td>{{car.Name}}</td>
		<td>{{car.Color}}</td>
		<td>{{car.Price}}</td>
		<td><img [src]= 'Car.ImageUrl' [style.width.px]='Width' [style.Height]='Height'></td>
		<td>{{car.Rating}}</td>
	</tr>	
    </table>
</div>

So, let’s create a star component. The star component can be used by any feature of the application. We’ll name it star.component.ts.

 //star.component.ts
 
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'pm-star',
   templateUrl: './star.component.html',
   styleUrls: ['./star.component.css']
 })
 export class StarComponent
 {
 }

We then create this component just like we’d create any other component, starting with the class, export class StarComponent. we decorate the class with the Component decorator.

Create template

Now let’s create the star component template.

 //star.component.html

 <div class="crop" [style.width.px]="starWidth" [title]="rating">
 <div style="width:75px">
	<span class="fa fa-star"></span>
	<span class="fa fa-star"></span>
	<span class="fa fa-star"></span>
	<span class="fa fa-star"></span>
	<span class="fa fa-star"></span>
 </div>
 </div>

Here, it displays five stars. It then crops the stars based on a defined width. This technique can then display partial stars, such as four and a half of the five stars by setting the width such that only four and a half of the stars appear. so this syntax is called property binding. We’re using it here to set the style width and bind the title property to display the numeric rating value.

Create component

we need two properties in the components class, the rating, and the starWidth. Let’s add these two properties.

  //star.component.ts
 
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'pm-star',
   templateUrl: './star.component.html',
   styleUrls: ['./star.component.css']
 })
 export class StarComponent
 {
   rating: number = 4;
   starWidth: number;
   
   ngOnChanges(): void {
     this.starWidth = this.rating * 75 /5;
   }
 }

here, We want a rating property, which is a number and defines the rating value. And we need the starWidth. This value is calculated based on the rating. So where do we put that calculation, we’d want the starWidth recalculated any time the container changed the rating number. and we have written code for the ngOnChanges method identified in the OnChanges interface. Using the ngOnChanges method, we’ll convert the rating number to a starWidth based on the width of our stars. Our component is now complete, and we’re ready to nest it in another component.