Angular component communication

Описание: Text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
   / @aarvikitchen5572  

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
   • Angular CRUD tutorial  

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic  

In this video we will discuss, how to pass data from child component to parent component.

Component Input Property
1. In Part 33 of Angular CRUD tutorial we discussed how to pass data from parent component to child component.

2. To pass data from parent component to child component we use input properties.

3. In the child component we create a property with @Input decorator.

4. The parent component then binds to the child component's input property.

Component Output Property
1. On the other hand, to pass data from child component to parent component we use output properties.

2. The child component raises an event to pass data to the parent component.

3. To create and raise an event, we use EventEmitter object.

4. So the output property is an event defined using EventEmitter object and decorated with @Output decorator.

5. To specify the type of data that we want to pass from the child component to parent component we use the EventEmitter generic argument.

In the example below, the notify event is used to pass string data from the child component to parent component. This event data is commonly called event payload.
@Output() notify: EventEmitter<string> = new EventEmitter<string>();

If you want to pass a number instead of a string as event data, then you specify the generic argument type as number instead of string.
@Output() notify: EventEmitter<number> = new EventEmitter<number>();

If you want to be able to pass any type of data, you can use 'any' as the generic argument type.
@Output() notify: EventEmitter<any> = new EventEmitter<any>();

You can only pass one value using EventEmitter. If you want to pass more than one value using EventEmitter use a custom type like Employee as the generic argument.
@Output() notify: EventEmitter<Employee> = new EventEmitter<Employee>();

You can get complete code in text format from our blog post at the following link
http://csharp-video-tutorials.blogspo...