Angular component communication

Text version of the video

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.

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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

[hshlom]

You just explain things really well. In all of your videos I've seen.
And your sample cases are just right, not too trivial and not too complicated.
Thank you so much!

[pugazhkrishna]

Really very great video's. Every second contains info dont skip even single sec.
Thank you sir.

[javacrackofficial]

Wow sir....its osum.... U r helping society....great

[daviddonadze]

screw Collage!! u are my teacher that i never had

[vikassharma]

I eagerly wait for your video sir,
You are the best tutor for me Hats off to you sir

[fionawang]

Thank you so much. Your instruction is very very clear, especially the last paragram

[williamsbotchway]

Many thanks sir. Please do add state management using the new ngxs api in a different tutorial series

[shahidwani]

Sir, when are you going for .net core videos

[drakedane]

If you care and read this, I can view videos on your channel, if they come up in YouTube search. But I get 500 Error, when I click on link to your Channel. Maybe Browser issue. But, if not, then could mean that no one can view your Channel right now. If so, you might want to talk to YouTube about it!

[putinninovacuna]

I dont want to pass parameters all i want is just call a function that is on another component why is this so difficults im just want to call a fkin method not to share anything stupid angular