Angular Tutorial - 15 - 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 and 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 the 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 now 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 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 dot tears 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 which was now to send this property to the test component we included in the opening tag of the selector so in app component dot 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 parent data 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 so in the test component I'm going to declare the same property that the add component is sending public parent data 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 at input and then parentheses now we also need to import it from angular slash core alright 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 parent data so now if I save this and take a look at the browser you can see hello which was so we are sending the data from the parent component to the child component and displaying it in the child component now sometimes you might want to use a different property name than the one parent component uses and for that we can specify an alias with the input decorator so instead of having parent data 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 parent data 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 parent data I'm going to bind the name so 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 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 so let's try to send a message hello code evolution from the test component to the app component and displayed 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 event emitter class so public I'm going to call this child event and this is going to be equal to new event emitter and make sure to import the event emitter class so after input event emitter now to be able to send this child event to the parent we use the output decorator so right before declaring public child event we use add output and then parentheses and make sure to import it as well so input comma output comma event emitter all right 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 fire event method let's go ahead and define this fire event method so fire event within the body this dot child event dot M it and then it hey code evolution so this is the message that we want to send to 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 dot 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 child event and once this event is captured let's assign to a property called message the dollar event variable now this dollar 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 so 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 all right 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 parent data is equal to name in 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 event emitter class and then emit it from the child component and we do that using the output decorator the parent component then to the event that executes either a template statement or can also call a method the dollar 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 in the parent component template in the h1 tag and that is how you see hey code evolution all right 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

Channel: Codevolution

Views: 425,496

Rating: 4.9084597 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Component Interaction, Angular Tutorial, Angular 5, Angular 5 Tutorial, Angular 6, Angular 6 Tutorial

Id: BGy8DdGw_WE

Length: 9min 33sec (573 seconds)

Published: Mon Dec 18 2017