Angular Tutorial - 15 - Component Interaction

Introduction to Component Interaction

Alright guys, in this video, let's learn about component interaction. Now, all this while we've been working with the test component, and the test component is nested inside the app component. So the app component is the parent component and the test component is the child component.\n\nAnd so far, they've been working independently. But in Angular applications, you are going to come across a scenario where the components need to interact or communicate with each other. The parent component might send some data to the child component, and the child component might also send some data to the parent component. So how do the components interact?\n\nThe answer is using input and output decorators. Using the input decorator, the child can accept input from the parent, and using the output decorator, the child will send out events to the parent to indicate something.\n\nNow for our example, here is what we will do. We will send a name from the app component to the test component, and in the test component we are going to display "hello" followed by the name. For example, hello Vishwas. Similarly, we are going to send a message "Hey Code Evolution" from the test component to the app component and display that message in the app component template.

Parent-to-Child Data Flow with @Input

And first let's take a look at sending data from the parent to the child, in other words, from the app component to the test component. So let me go back to Visual Studio Code, and I have opened app.component.ts. So in the app component class, I'm going to create a new property. This is going to be public name and set it to the string "Vishwas".\n\nNow to send this property to the test component, we include it in the opening tag of the selector. So in app.component.html, in the test component selector, in the opening tag, I'm gonna bind the name property. So we have a property binding to a property called parentData, and we are binding the name that we have declared in the app component class. So we are now sending this data to the test component. Let's head over there and receive it.\n\nSo in the test component, I'm going to declare the same property that the app component is sending: public parentData. But we need a way to inform to the test component, "hey, this is not a normal property, this is an input property and you will receive this value from the parent." And the way we do that is using the input decorator. So right before declaring the property we add the @Input() decorator. Now we also need to import it from @angular/core.\n\nAlright now that we have the property value as an input, we can bind this to the template. So in the template, I'm going to add an h2 tag and use interpolation to display hello followed by the parentData. So now if I save this and take a look at the browser, you can see "hello Vishwas". So we are sending the data from the parent component to the child component and displaying it in the child component.

Using an Alias with the @Input Decorator

Now sometimes you might want to use a different property name than the one the parent component uses, and for that, we can specify an alias with the input decorator. So instead of having parentData over here, I can have it within parentheses, within single quotes. And then I can name the property as name. So we are saying, "hey, the input is still parentData, but within this component, I'm going to refer to it as name." And then we bind this to the template as well. So instead of parentData, I'm going to bind the name.\n\nSo now if we save this and take a look at the browser, it still is "hello vishwas", works perfectly fine. So we have successfully sent data from the parent component to the child component.

Child-to-Parent Data Flow with @Output and EventEmitter

Now let's take a look at sending data the other way round, from the child component to the parent component. Now, this is slightly different. In a parent component HTML, we have the child component selector, so you can easily bind the data this way. But in a child component, you do not have the parent component selector, so you cannot send data the same way. The way a child component sends data to the parent component is using events.\n\nSo let's try to send a message, "hello Code Evolution" from the test component to the app component and display it in the app component. So first, let's create an event that we can send to the parent. So in the test component class, create a new instance of the EventEmitter class. So public, I'm going to call this childEvent, and this is going to be equal to new EventEmitter(), and make sure to import the EventEmitter class. So after @Input, EventEmitter.\n\nNow, to be able to send this childEvent to the parent, we use the output decorator. So right before declaring public childEvent, we use @Output() and then parentheses, and make sure to import it as well. So Input, comma Output, comma EventEmitter. Alright, now we have set up our custom event. Let's fire this event on a button click. So I'm gonna add a new button over here that says "Send Event" and on click, let's call a fireEvent method. Let's go ahead and define this fireEvent method. So fireEvent, within the body, this.childEvent.emit() and then "Hey Code Evolution". So this is the message that we want to send to the parent component.

Handling Custom Events in the Parent Component

Alright, now that the event is emitted on the button click, let's capture it in the parent component. So let's go back to app.component.html. Now just like how we bind to a click event, we can bind to our custom event as well. So within the app-test selector, we can capture the childEvent. And once this event is captured, let's assign to a property called message the $event variable.\n\nNow this $event variable is going to refer to "Hey Code Evolution", which is the string message that we want to send to the parent component. So now that we have a property called message, let's also declare it in our app component class and then display it in the template. So instead of Welcome to {{title}}, I'm going to say {{message}}.\n\nSo let's test this out now. If I go back to the browser and I click on this button, you can see the message "Hey Code Evolution" displayed from the app component. So the data is flowing from the child to the parent.

Final Summary and Recap

Alright, let me quickly summarize so that you get a better understanding. Now to send data from the parent to the child, in the parent component declare a property and then bind it to the child selector: [parentData]=\"name\".\n\nIn the child component, declare another property with the @Input decorator. You can use either the same name or an alias. You can then bind that property in the child component template. Now, to send data from the child to the parent, we make use of events. We create an instance of the EventEmitter class and then emit it from the child component, and we do that using the @Output decorator.\n\nThe parent component then listens to the event that executes either a template statement or can also call a method. The $event variable will give access to the argument that was sent from the child method, "Hey Code Evolution". So you can assign this to a property in your parent component, which is the app component. You can then display it in the parent component template in the h1 tag, and that is how you see "Hey Code Evolution".\n\nAlright, so that is about component interaction in Angular. Thank you guys for watching. Don't forget to subscribe, and I'll see you guys in the next video.