Angular Tutorial For Beginners - Part Eight - Nesting Components

In this article, you will learn about Nesting Components in Angular.

This is part 8 of the Angular tutorial for Beginners series,
This part discusses how we can create nested components in Angular. This is in continuation with the above parts. It is advised you go through them before proceeding.
 
For the purposes of this demo, we will add an extra field called ‘Angular Proficiency’.
 
We will add this field in the employees.json file as below,
  1. [  
  2.     {  
  3.     "employeeId":1,  
  4.     "employeeName":"Tuba",  
  5.     "projectId":100,  
  6.     "angularProficiency""3.5"  
  7.     },  
  8.     {  
  9.         "employeeId":2,  
  10.         "employeeName":"Atul",  
  11.         "projectId":101,  
  12.         "angularProficiency""4.0"  
  13.     },  
  14.     {  
  15.         "employeeId":3,  
  16.         "employeeName":"Theran",  
  17.         "projectId":101,  
  18.         "angularProficiency""5.0"  
  19.     }  
  20. ]  
Angular Tutorial - Nesting Components
 
Change the employee.ts file as below.
 
Angular Tutorial - Nesting Components
 
We will also change the employee.component.html as below,
 
Angular Tutorial - Nesting Components
 
Now, if we run the code we can see a new column ‘Proficiency In Angular’ as below.
 
Angular Tutorial - Nesting Components
 

Creating a Nested component

 
Now instead of displaying the ‘Proficiency in Angular’ as numbers, we will display them proficiency levels of ‘good’, ‘very good’, ‘Excellent’.
 
For that, we will create a nested component. The nested component will take the ‘Proficiency In Angular’ column values as input and give us output as a proficiency level.
 
Angular Tutorial - Nesting Components
 
We write the following code in rating.component.ts, 
  1. import {Component, OnChanges} from '@angular/core';  
  2. @Component({  
  3.     selector:'nested-rating',  
  4.     templateUrl: 'rating.component.html'  
  5. })  
  6. export class RatingComponent implements OnChanges{  
  7.   rating:number = 3.5;  
  8.   proficiencyLevel: string = 'Default';  
  9.    
  10.   ngOnChanges() : void{  
  11.      if(this.rating == 3.5){  
  12.          this.proficiencyLevel = 'Good';  
  13.      } else if (this.rating == 4.0){  
  14.          this.proficiencyLevel = 'Very Good'  
  15.      } else if(this.rating == 5.0){  
  16.          this.proficiencyLevel = 'Excellent'  
  17.      } else {  
  18.          this.proficiencyLevel = 'Undefined'  
  19.      }  
  20.   }  
  21. }  
Angular Tutorial - Nesting Components
 
In the file, we have defined two properties, rating & proficiencyLevel. Both are hardcoded as of now. We will later change the rating property to get its input from employee.component.ts.
 
We now create another file ‘rating.component.html’ as below,
  1. <div>  
  2.    {{proficiencyLevel}}  
  3. </div>  
Angular Tutorial - Nesting Components
 
The HTML file simply displays the proficiencyLevel. In this case, since we have hardcoded the proficiencyLevel to ‘Default’, we should get the value of the Proficiency in Angular column as ‘Default’.
 
We will now import this new component in app.module.ts as below.
 
Angular Tutorial - Nesting Components
 
We now change employee.component.html as below,
 
Angular Tutorial - Nesting Components
 
Note the ‘nested-rating’ is the selector for our rating component. This is how we nest our component.
 
We will see the output as,
 
Angular Tutorial - Nesting Components
 
The Proficiency level is ‘Default’, because we have hardcoded that value.
 

Using @Input decorator

 
Now that our nested component is displaying properly, let’s have a look at how we can pass input to our nested component.
 
To pass the angularProficiency property of the Employee class as an input, we just need to make the following change.
 
Angular Tutorial - Nesting Components
 
ngChanges is called when data binding from the parent component pushes a new value into the child component.
 
Using the @Input decorator, we mark ‘rating’ as an input field.
 
Next, we set the input value as below,
 
Angular Tutorial - Nesting Components
 
Let’s check our output.
 
Angular Tutorial - Nesting Components
 
Notice the Proficiency in Angular column. We have successfully managed to provide input to our nested component.
 

Using @Output decorator

 
We have seen how to pass value from parent component to child component. Let’s have a look at how we can use the @Output decorator to pass value from child component to parent component.
 
We will change the rating.component.html as follows, to add a button, and raise call a function on its click as below,
 
Angular Tutorial - Nesting Components
 
Now, let’s define the onClick function in rating.component.ts.
 
Angular Tutorial - Nesting Components 
  1. onClick():void{  
  2.       this.proficiencyClicked.emit(`The proficiency level of this employee is ${this.proficiencyLevel}`);  
  3.   } 
We define a property proficiencyClicked with an Output decorator. To pass data from child component to parent component we need to raise an event. After that, we use the emit method above to emit a message. Notice how we have used backticks in the emit method above.
 
Now, to get the emitted message in the parent component, we make the below changes:
  1. <td><nested-rating [rating] = 'employee.angularProficiency' (proficiencyClicked)= 'onProficiencyClicked($event)'></nested-rating></td>  
Angular Tutorial - Nesting Components
 
We also use a variable {{messageFromNestedComponent}} to display this message.
 
Now, we define the above variable and onProficiencyClicked function in employee.component.ts.
  1. messageFromNestedComponent = '';       
  2.    onProficiencyClicked(message:string) : void {           
  3.       this.messageFromNestedComponent = 'Here is the message from nested component: ' + message;       
  4. }  
Angular Tutorial - Nesting Components
 
We have defined the onProficiencyClicked method as a function that has an input parameter of a string and returns a void.
 
Let’s test our code.
 
Angular Tutorial - Nesting Components
 
When we click the ‘Click to get a message from the nested component’ button, a message is displayed on top of the table depending upon the button click. We have thus successfully managed to pass a message from a child component to a parent component.
 
Refer to this article on the official Angular site for more information.
 
In the next part of this Angular Tutorial for Beginners series, we will discuss routing.
 
This article was originally published on my website taagung.