Custom Property and Event Binding Using @Input/@Output Decorator

 Using custom property and event binding we can establish communication between parent and child component.

Let take a below example. Here we are adding student name and age in student component and display student details in student-list component.

Now we start to build our example.

Step 1 : Create Student model (student.model.ts)

export class Student{

    name : string;

    age : number;

    constructor(name : string , age : number){

    this.name = name;

    this.age = age;

    }

}

Step 2 : Generate components

ng g c student

ng g c student/student-list

Step 3 : app.component.ts (Parent component)

import { Component, EventEmitter, Output } from '@angular/core';

import { Student } from './student/student.model';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  students : Student[] = [];

    addStudent(student : Student){

      this.students.push({name : student.name ,age : student.age});

    }

}

Step 4 : app.component.html

<app-student (buttonClick)="addStudent($event)"></app-student>

        

<app-student-list *ngFor="let student of students"

[studentList] = "student"></app-student-list>

Step 5 : Add @Input decorator in student-list.component.ts

import { Component, Input, OnInit } from '@angular/core';

import { Student } from '../student.model';

@Component({

  selector: 'app-student-list',

  templateUrl: './student-list.component.html',

  styleUrls: ['./student-list.component.css']

})

export class StudentListComponent implements OnInit {

  name : string = '';

  age : number = 0;

  @Input() studentList : Student;

  constructor() { }

  ngOnInit(): void {

  }

}

Step 6 : student-list.component.html

<div class="container">

    <div class="row">

        <div class="panel panel-default">

            <div class="panel panel-heading" >

                Student Details

            </div>

            <div class="panel-body">

               <p> {{studentList.name}}</p>

               <p>{{studentList.age}}</p> 

            </div>

        </div>

    </div>

</div>

Step 7 : Add @Output decorator in student.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

import { Student } from './student.model';

@Component({

  selector: 'app-student',

  templateUrl: './student.component.html',

  styleUrls: ['./student.component.css']

})

export class StudentComponent implements OnInit {

   students: Student[] = [];

   name : string = '';

   age : number = 0;

  @Output() buttonClick = new  EventEmitter<Student>();

  constructor() { 

  }

  ngOnInit(): void {

  }

  onStudentAdd(){

    this.buttonClick.emit({ name : this.name,age : this.age});

  }

}

Step 8 : student.component.ts

<div class="container">

    <div class="row">

      

            <label for="name">Name</label>

            <input type="text" class="form-control" [(ngModel)]="name" >

            <label for="Age">Age</label>

            <input type="number" class="form-control" [(ngModel)]="age" >

        <br/>

        <button type="button" class="btn btn-primary" (click)="onStudentAdd()">Add Student</button>

    </div>

</div>