Angular Tutorial For Beginners - Part Eight - Nesting Components

This is part 8 of the Angular tutorial for Beginners series,

• Part 1: Getting started with Angular
• Part 2: Modules, Components & Directives in Angular
• Part 3: Data binding in angular
• Par 4: Interfaces
• Part 5: Services in Angular
• Part 6 discussed Observables & Http requests.
• Part 7 discussed how we can transform our output data with pipes.

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,

[
    {
    "employeeId":1,
    "employeeName":"Tuba",
    "projectId":100,
    "angularProficiency": "3.5"
    },
    {
        "employeeId":2,
        "employeeName":"Atul",
        "projectId":101,
        "angularProficiency": "4.0"
    },
    {
        "employeeId":3,
        "employeeName":"Theran",
        "projectId":101,
        "angularProficiency": "5.0"
    }
]

 

Change the employee.ts file as below.

 

 

We will also change the employee.component.html as below,

 

 

Now, if we run the code we can see a new column ‘Proficiency In Angular’ as below.

 

 

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.

 

 

We write the following code in rating.component.ts, 

import {Component, OnChanges} from '@angular/core';
@Component({
    selector:'nested-rating',
    templateUrl: 'rating.component.html'
})
export class RatingComponent implements OnChanges{
  rating:number = 3.5;
  proficiencyLevel: string = 'Default';

  ngOnChanges() : void{
     if(this.rating == 3.5){
         this.proficiencyLevel = 'Good';
     } else if (this.rating == 4.0){
         this.proficiencyLevel = 'Very Good'
     } else if(this.rating == 5.0){
         this.proficiencyLevel = 'Excellent'
     } else {
         this.proficiencyLevel = 'Undefined'
     }
  }
}

 

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,

<div>
   {{proficiencyLevel}}
</div>

 

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.

 

 

We now change employee.component.html as below,

 

 

Note the ‘nested-rating’ is the selector for our rating component. This is how we nest our component.

 

We will see the output as,

 

 

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.

 

 

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,

 

 

Let’s check our output.

 

 

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,

 

 

Now, let’s define the onClick function in rating.component.ts.

 

 

onClick():void{
      this.proficiencyClicked.emit(`The proficiency level of this employee is ${this.proficiencyLevel}`);
  }

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:

<td><nested-rating [rating] = 'employee.angularProficiency' (proficiencyClicked)= 'onProficiencyClicked($event)'></nested-rating></td>

 

We also use a variable {{messageFromNestedComponent}} to display this message.

 

Now, we define the above variable and onProficiencyClicked function in employee.component.ts.

messageFromNestedComponent = '';
   onProficiencyClicked(message:string) : void {
      this.messageFromNestedComponent = 'Here is the message from nested component: ' + message;
}

 

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.

 

 

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.