This is part 8 of the Angular tutorial for Beginners series.
Part 1 of this series discussed how to get started with Angular.
Part 2 discussed about the basic tenets of Angular Modules, Components and Directives.
Part 3 discussed data binding.
Part 4 discussed interfaces
Part 5 discussed how we can use 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.
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 an 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 it’s input from employee.component.ts.
We now create another file ‘rating.component.html’ as below:
{{proficiencyLevel}}
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 an 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 @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 back ticks 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 & 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 message from nested component’ button, a message is displayed on top of the table depending upon the button click. We have thus successfully managed to pass message from a child component to a parent component.
Refer this article on the official Angular site for more information.
In the next part of this Angular Tutorial for Beginners series we discuss routing.
Contents of the Angular tutorial for Beginners series:
Part 2: Modules, Components & Directives in Angular.
Part 3: Data binding in angular.