Angular 9 Tutorial - 17 - angular component input and output properties | Component interaction

In this video we will Learn how to interact with other components.

1. how to pass data from the container component or parent component to the nested component using input properties.
2. How to pass user actions or user entered values or selections from the child component to the parent component using output properties.
3. We will discuss creating custom events using angular EventEmitter class
4. Sharing data between two components using @Input() and @Output() decorators.
5. I will explain Angular Components Interaction along with simple application implementation.

Search Tags
Custom events in angular | input property angular | input property setter angular | input property setter | input and output property in angular | component interaction angular 6 | component interaction in angular example | angular component output example | angular component output event | angular component output properties | angular child component output | angular child component call parent function | angular eventemitter between components | angular eventemitter callback | angular eventemitter child | angular eventemitter emit | angular eventemitter import | eventemitter in angular | angular eventemitter not working | angular eventemitter sample | angular eventemitter tutorial | angular eventemitter typescript | angular tutorial |

Code:

@Input() employees : any[];

@Output() onReset : EventEmitter any[] = new EventEmitter any[] ();

Reset(){
}

button class="reset" (click)="Reset()" Reset Employees /button
div class="display-row"
div class="card" *ngFor= "let emp of employees; let i=index; trackBy: trackByEmpId"
div class="card-body"Id: {{emp.Id}}/div
div class="card-body"Name: {{emp.Name}}/div
div class="card-body"Age: {{emp.Age}}/div
div class="card-body"Sal: {{emp.Sal}}/div
div class="card-body"Department: {{emp.Department}} /div
/div
/div

app-home [employees] = "empList" (onReset)="resetEmployees($event)" /app-home

empList = [
{
Id: 1,
Name : 'John',
Age : 30,
Sal : 50000,
Deptartment : 'IT'
},
{
Id: 2,
Name : 'Mike',
Age : 35,
Sal : 30000,
Deptartment : 'Admin'
},
{
Id: 3,
Name : 'Gates',
Age : 30,
Sal : 70000,
Deptartment : 'IT'
},
{
Id: 4,
Name : 'Robert',
Age : 30,
Sal : 40000,
Deptartment : 'HR'
}
];

resetEmployees(eventData){
}

[nabilshahid]

This is a great tutorial series for beginners. This almost reflects the official docs of Angular. Watching these videos and following the official docs side by side will surely help a lot. Enjoying this series very much. Keep up the good work!! :)