Angular - @Input() Directive

As we know that component is the basic building block of Angular applications, that means that an Angular application is a collection of components and it is possible that one component contains another component for the purpose of reusability. The component which contains another component is called a parent/container component and the component which is contained/present inside another component is called a child/nested component. Then:

How these components communicate with each other?
How do we send data from parent component to child component?
How do we send data from child to parent component?

So, in this article, we will learn how to send data from parent component to the child component. We will build the below screen and will send the data from parent to child component using @Input(). Please note that I have used bootstrap classes to add some basic style.

To build the below screen, we need two components,

student-list.component.ts (Container/Parent component) - This component is responsible for displaying the student list.
student-count.component.ts(Nested/Child component) - This component is responsible for displaying the 3 Radio buttons named: All, Male, Female, and we are calling this component inside student-list.component.html using the component’s selector directive.

Now, let’s open student-list.component.ts file and paste the below code.

import {
Component
} from '@angular/core'
import {
FormGroup,
FormControl
} from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app/student-list.component.html',
})
// This is parent(container) component which contains child(nested) Component(student-count.component.ts)
export class StudentListComponent {
public students: any; // this variable holds the list of students
constructor() {
//Initialized student array to hold some student object
this.students = [{
Id: 1,
Name: "Mahesh",
Address: "Thane",
Gender: "Male"
}, {
Id: 2,
Name: "Nishikant",
Address: "Chembur",
Gender: "Male"
}, {
Id: 3,
Name: "Sameer",
Address: "Mulund",
Gender: "Male"
}, {
Id: 4,
Name: "Nitin",
Address: "Nahur",
Gender: "Male"
}, {
Id: 4,
Name: "Siri",
Address: "Worli",
Gender: "Female"
}];
}
//Below for simplicity I have created 3 method to get the count of students based on the gender
//We can do that in single method by passing the parameter.
//we will use these functions to pass data to the input properties in child component
getTotalStudentsCount() {
return this.students.length;
}
//Get the maleStudentsCount
getMaleStudentsCount() {
return this.students.filter(student => student.Gender == 'Male').length;
}
//Get the femaleStudentsCount
getFemaleStudentsCount() {
return this.students.filter(student => student.Gender == 'Female').length;
}
}

In the above code, I have just created and initialized the "students" array in the constructor and added three methods which will return us the count of the students based on the gender and we are going to use these methods to give values to input properties using property binding.

Now, open student-list.component.html to add some HTML code.

<body>
<!--Now using the property binding in selector tag we are passing data to input properties
present in child component(student-count.component.ts)
ex.[totalStudentsCount]="getTotalStudentsCount()"
-->
<student-count [totalStudentsCount]="getTotalStudentsCount()" -- [maleStudentsCount]="getMaleStudentsCount()" [femaleStudentsCount]="getFemaleStudentsCount()"> </student-count>
<hr>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students">
<th scope="row">{{student.Id}}</th>
<td>{{student.Name}}</td>
<td>{{student.Address}}</td>
<td>{{student.Gender}}</td>
</tr>
</tbody>
</table>
</div>
</body>

In the above HTML code, I have used child component, i.e., student-count component selector as a directive to render inside the student-list component and I am passing the values to the input properties of child component using property binding.

<student-count [totalStudentsCount]="getTotalStudentsCount()" --[totalStudentCount] is the input property in student-count.component and I am assigning values by calling respective method which is present in .ts file [maleStudentsCount]="getMaleStudentsCount()" [femaleStudentsCount]="getFemaleStudentsCount()">
</student-count>

And then, I am rendering the table using the *ngFor directive.

Now, open the student-count.component.ts file and paste the following code.

import {
Component,
Input
} from "@angular/core";
@Component({
selector: 'student-count',
templateUrl: './app/student-count.component.html'
})
export class StudentCountComponent {
//here we have decorated variables using @Input directive means that these
//variables will get data from parent component
//in our case,
//it is from student-list.component
@Input()
totalStudentsCount: any;
@Input()
maleStudentsCount: any;
@Input()
femaleStudentsCount: any;
//this variable is use to select the All Radio button by default
selectedRadioButton: any = "All";
}

Here, I have declared 3 variables and decorated those variable with @Input() directives which means these variables will get values from the parent component.

See the comments in the above code for more information.

Now, open the student-count.component.html file and paste the following code.

<div class="container">
<p style="font-weight: bold;">Select:</p>
<form> <label class="radio-inline">
<input type="radio" name="optradio" value="All" [(ngModel)]="selectedRadioButton">All({{totalStudentsCount}})
</label> <label class="radio-inline">
<input type="radio" name="optradio" value="Male" [(ngModel)]="selectedRadioButton">Male({{maleStudentsCount}})
</label> <label class="radio-inline">
<input type="radio" name="optradio" value="Female" [(ngModel)]="selectedRadioButton">Female({{femaleStudentsCount}})
</label> </form>
</div>

In the above code, I’m rendering 3 radio buttons using HTML and displaying the respected count of students based on gender using interpolation ( {{ //TODO }} ).

HTML output screenshot

In the above image, we are getting the count of respective students using input directive. In this way, we can pass the data from parent component to a child component.

In our next article, we will learn how to pass data from child component to the parent component using @Output() directive and how to raise the custom event.

Hope this will help you.

Thanks!

You can download the complete code from my GitHub repository using below link.

https://github.com/mahesh353/InputDirective