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>
