Angular @Output() Directive

In my previous article, I have already discussed @Input directive; i.e., how to send data from parent component to child component:

• Angular - @Input() Directive

In this article, we are going to talk about how to send data from child component to parent component using the @Output() directive. For simplicity, I am going to use the same code which I have used in my previous article and I will add some more code to explain output directive so in case you missed reading my previous article, then I would recommend you read that first, using the above link.

See the above screen; in this example, my requirement is to notify and send the selected radio button value, i.e., [Male, Female, All] from child component to parent component so that once the user selects the radio button, the respective data gets displayed in the parent, i.e., student list component.

For exxample – if a user selects Male, then student list component will display only male student and so on. For this, we’ll start from the child component, i.e., student-count component.

Step 1

Let’s open student-count.component.ts file and paste the below code.

import { Component, Input, Output, EventEmitter } from "@angular/core";
@Component({
    selector: 'student-count',
    templateUrl: './app/student-count.component.html'
})
export class StudentCountComponent {
    @Input()
    totalStudentsCount: any;
    @Input()
    maleStudentsCount: any;
    @Input()
    femaleStudentsCount: any;
    //this variable is use to select the All Radio button by default
    selectedRadioButton: any = "All";

    //Now once user click on the radio button we need to raise custom event and notify the parent component
    //and along with the event we need to send the selected radio button value
    //That's why I have created the below property and used @Output() directive to turn that into event
    //and I am using one more class i.e EventEmitterClass to create the custom event
    //And while creating the object of the EventEmitter I am Passing string as a Payload so that we will send selected radio button value to the parent component
    @Output()
    radioButtonSelectionChanged: EventEmitter<string> = new EventEmitter<string>();
    //This function will get called when someone clicks on the radio button
    //And to this function I am passing the selected radio Button value and inside this function will raise our custom event radioButtonSelectionChanged
    //using the emit method of EventEmitter class
    selectedRadioButtonChanged(selectedRadioButtonValue) {
        this.radioButtonSelectionChanged.emit(selectedRadioButtonValue);
    }
}

In the above code, I have just created the custom event using the @Output directive and the Event Emitter class which is present in the @angular/Core package.

And then, I have added one simple function, i.e., selectedRadioButtonChange() which gets called when user clicks on the any, i.e., All, Male, Female, radio button. In that function, we are raising the custom event using the emit method of the EventEmitter class and we are passing the selected radio button value as payload to custom event.

Step 2

Open student-count.component.html to add some HTML code.

<div class="container">
    <p style="font-weight: bold;">Select:</p>
    <form>
        <label class="radio-inline">
            <!-- In below tag I have just added this event (change)="selectedRadioButtonChanged('All')"  and the I am passing selected radio button value
            To the event handler function. Same way I have done for remaining radio buttons
            -->
            <input type="radio" name="optradio" value="All" [(ngModel)]="selectedRadioButton" (change)="selectedRadioButtonChanged('All')">All({{totalStudentsCount}})
        </label>
        <label class="radio-inline">
            <input type="radio" name="optradio" value="Male" [(ngModel)]="selectedRadioButton" (change)="selectedRadioButtonChanged('Male')">Male({{maleStudentsCount}})
        </label>
        <label class="radio-inline">
<input type="radio" name="optradio" value="Female" [(ngModel)]="selectedRadioButton" (change)="selectedRadioButtonChanged('Female')">Female({{femaleStudentsCount}})
        </label>
    </form>
</div>

In the above HTML code, I have added a change event on each and every radio button which will eventually raise our custom event (see the comments in HTML code for more information).

Step 3

Open the student-list.component.html file and paste the following code.

<h4 style="text-align: center">@Output() Directive(To send data from child to parent)</h4>
<hr>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <!--Here we are using selector as directive to call(render) the child component(student-count.component.ts) -->
    <!--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()"
    -->
    <!--and same we are binding our custom event -->
    <student-count [totalStudentsCount]="getTotalStudentsCount()"
                   [maleStudentsCount]="getMaleStudentsCount()"
                   [femaleStudentsCount]="getFemaleStudentsCount()"
                   (radioButtonSelectionChanged)="radioButtonChangedEventHandler($event)">
    </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>
                <!--using *ngFor directive to iterate over student list-->
                <ng-container *ngFor="let student of students">
                <tr *ngIf="selectedRadioButtonValue=='All' || selectedRadioButtonValue == student.Gender">
                    <th scope="row">{{student.Id}}</th>
                    <td>{{student.Name}}</td>
                    <td>{{student.Address}}</td>
                    <td>{{student.Gender}}</td>
                </tr>
            </ng-container>
            </tbody>
        </table>
    </div>
</body>

</html>

In the above code of student list component, I have used my previous article's code as it is and apart from that, I have added the below line on my child components selector directive to raise and handle the custom event.

(radioButtonSelectionChanged)="radioButtonChangedEventHandler($event)"

So, we are raising radioButtonSlection changed custom event using the @Output and EventEmitter class and radioButtonChangedEventHandler($event)" is our event handler function which will get called whenever the user clicks on any of the radio buttons.

<tr *ngIf="selectedRadioButtonValue=='All' || selectedRadioButtonValue == student.Gender">

 And in my code, I am using one more directive; i.e. ng-container directive, as we cannot add two structure directives on the same element - *ngIf and *ngFor

<ng-container *ngFor="let student of students">

 See the comments in the above code for more information.

Step 4

Open the student-list.component.ts file and paste the following 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 {
    selectedRadioButtonValue: any = 'All';
    public students: any;// this variable holds the list of students
    constructor() {
        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.
    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;
    }
    radioButtonChangedEventHandler(radioButtonValue) {
        this.selectedRadioButtonValue = radioButtonValue;
    }
}

In the above code, I have used the same code from the input directive example and apart from that, I have added one event handler function which will handle our custom event. In this function, I’m just assigning the value to one variable which we are using to filter the data in our HTML template.

Html output screenshot

In the above image, we are getting the respective students once the user clicks on the radio button using @Output() directive. In this way, we can pass data from Child component to Parent component and create and raise the custom event using the @Output directive and Event Emitter class.

I hope this will help you.

Thanks.

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

https://github.com/mahesh353/OutputDirective