Angular component communication

this is part 37 of an Loch Radha tutorial in this video we will discuss how to pass data from the child component to parent component using output property in our previous video we discussed how we can make use of an input property to pass data from the parent component to child component so let's quickly review input properties in the child component we create a property with add input decorator notice with another child component right here we are creating this employee property and it is decorated with that input decorator so this employee property is an input property and then within the parent component we bind to this input property and then pass the data it needs notice here we are binding to the employee input property of our child component which is display employee component and then passing it the data it needs and this chill component will display the employee details so we are using input properties to pass data from the parent component to child component we discuss this in detail in our previous video in this video we'll discuss how to pass data from the child component to the parent component using an output property let's understand this with an example here is what we want to when we click on this employee panel which is rendered by our child component display employee component we want to display this specific employee name in an h1 element just above the panel right here between the menu and the panel so we want to pass the employee name from the child component to the parent component so the parent component can display that name within an h1 element right here so let's see how to achieve this using auto property so if I click on this employee panel right here this employee name is Mary so it should display Mary within that h1 element so depending on which panel we have clicked we want to display that specific employee name within an h1 element with no apparent component so we want to pass the employee name from the child component to the parent component and let's see how to achieve this using an output property so the first thing that I'm going to do here is create an output property within our child component display employee component to create an input property we use the add input decorator along the same lines to create an output property we use the output decorator so first let's import the output decorator next let's create the property itself I'm going to name it notify since this is an output property I'm going to decorate it with at output decorator now we need to specify the type for our output property notice we have specified the type for our input property as employee because the parent component is going to pass an employee object into this child component along the same lines we need to specify the type for our output property the time for our output property is going to be event emitter so first let's go ahead and import event emitter now let's set this event emitter as the type for our notify output property as far as an output property is concerned one of the very confusing aspects is specifying its type now you might be wondering why are we setting the type of our output property to an event emitter object well that's because a child component uses an event to pass data to the parent component now let's quickly recap what data we want to pass from the change component to the parent component and most importantly when do we want to pass that data from the child component we want to pass the name of the employee so the name of the employee is a string so the type of data that we want to pass from the child component to the parent component is string and when do we want to pass that string data whenever there is a click event on any of these employee panels right here so the type of data that we want to pass is string and we want to pass the data when there is a click event on the employee panel as the name implies even the emitter object helps us emit a custom event because we are going to use an event to pass data from the child component to the parent component and the type of data that we want to pass a string so we have said the generate type of the event emitter to string if you want to pass numeric data then you set the type to number if you're not bothered about the type and want to be able to pass any type of data then you can use any type like this but this is not a great thing to do because we are losing tight safety one important point to keep in mind is using this event emitter object we can pass only one value if you want to be able to pass more than one value then create a custom type specifying your values as properties and then include that custom type as the argument for this event emitter generic type in our case we want to pass only one value and the type for that value is string so let's change this back to string now we need to raise this custom event notify but the important question that comes to mind is when should we raise this event well we should raise this event whenever the user clicks anywhere on this employee bootstrap panel the HTML for the employee panel is within the butan plate of our change component notice here is the bootstrap panel there and we have the HTML here which displays the employee photo and the rest of the details so on this development I'm going to wire up the click event handler since this is an even binding we include a pair of parentheses and I'm going to name our even handler handle click we don't have this method within our component class so let's go ahead and create this now all that is left to do is raise our custom event notify from this handle click method notice when I type this dot we see the notify event and raise this event we use the emit method of the event emitter object when we emit this event we also want to pass the name of the employee to the parent component so to get the name of the employee we are going to make use of this employee property right here so this dot employee dot name is going to give us the name of the employee and we are passing that as the even data this even data is also commonly called as event payload next in the parent component we need to bind to this custom notify event our parent component is list employees component so in the view template of Lists employee component here we have our child component used as a directive so let's bind to the notify event since this is an event binding we use a pair of parentheses when this event is raised we want to handle it and to handle that event I'm going to include this method handle notify and remember when the change component raises this event it's also going to pass employee name as the even data and this dollar event object is going to receive that event payload we don't have this handle notify method in our component class so it's good and created now we know this method is going to receive the employee name as even data employee name is string so I'm going to specify the type as string now what do we want to do with this even data that we receive from the child component well we want to display that in an h1 element between the menu and this employee panel right here so within the view template of our parent component which is list employees component let's include an h1 element right here and let's bind this to a property called data from child we don't have this property yet we'll create this in just a bit let's copy the name of this property and create that within our component class the type for this property is going to be string and all we're going to do is within this handle notify method we are going to assign even data to this data from child probably and we know within our view template you're binding to that property so let's save all of our changes and then take a look at the browser notice on the initial page load we don't have anything displayed but when I click anywhere on an employee panel that respect to employee name is displayed as expected at the moment they're only displaying employee name one value now let's say we want to display employee name as well as their gender now we want to be able to pass both the name of the employee and gender as even data so within our child component where we are specifying the event type right here at the mount way of passing employee name so the type is string but now we want to pass both employee name and gender but using this event emitter we can only pass one value to be able to pass more than one value we need to specify a custom type here we already have it type for our employee which is employee so let's specify that right here notice as soon as we have done that we have an error right here because the even payload now is of type employee and not string so let's knock off this name property from the employee object we need to make a similar change in our parent component so the type of this property is employee along the same lines the even data type iya is employee and then in the view template let's bind to the name and gender property let's save all our changes and then take a look at the browser now let's launch browser developer tools and if we take a look at the console tab we have couple of errors here and look at what the error says cannot read properly name of undefined the reason we are getting this error is this property data from child this is null on the initial page load it's only said when we click on an employee panel that's when we see the name of the employee and gender but on the initial page load this property is now and we are calling name property on an undefined object that's why we see this error cannot read property name of undefined to fix this let's use the safe navigation operator here and here notice now we don't have any errors on the console but we see null two times that's because data from child in both the cases here is now now on the initial page load we don't want to render this h1 element at all so I'm going to use the structural directive ngf so render this h1 element only if data from child is true thee notice now we don't have any errors on the console and we also don't see in all displayed on the initial page load and when we click on an employee panel we see that respective employee name and gender so we use an output property to pass data from a child to a parent component output properties are not as straightforward as input properties there are several moving parts so let's understand these different moving parts one by one first we create the output property in the child component since it's an output property we decorate it with at output decorator output properties use events to emit data from child component to the parent component so we are using event emitter object and to specify the type of data that we want to pass along with the event we use the event emitter generic type in this case we want to pass employee object so we specify the type here as employee next we need to raise our custom event notify in our case we want to raise this notify event whenever a user clicks on the employee panel so within the view template of our child component we wire up the click event handler on the development so when we click on the development we are calling this handle click method which emits the notify event passing it the employee object as the event payload next in the parent component bind to the child component custom event so in our case we are binding to the child component notify custom event when this event is raised we are handling it using this handle notify method now this method receives the event data in our case the even data is this employee object so this parameter right here dollar event receives the even payload finally in the parent component class include handle notify even handler method and all this even handler method does this assigns the even data employee object in this case to this property data from child and of a view template binds to that property to display the name of the employee and their gender I hope output properties make a bit more sense now in our next video we'll discuss an easy approach to pass data from the child component to parent component that's it in this video thank you for watching and have a great day you

Channel: kudvenkat

Views: 41,572

Keywords: passing data from nested component in angular, angular inter component communication, angular child to parent, angular custom events, angular 5 eventemitter example, angular 5 component communication, angular 4 component interaction, angular 4 component communication, angular 2 component interaction, angular 2 component communication, angular 5 inter component communication

Id: -zJVea9DPb8

Length: 14min 28sec (868 seconds)

Published: Mon Apr 02 2018