Angular Component Communication: Everything You Need to Know

Hello everybody welcome to another video from code search with profanis very often we need to apply a communication between our components some of them have a parent child Association and some are just siblings who need to communicate in this video we will see how to apply a component communication using the input output decorators how to have a template only communication using a template reference variable how to apply communication using streams from a custom service and last but not least how to apply a communication using the view children till the end of this video you will learn how to use all of these techniques so let's get started I have prepared this page where we can see that we have a list of products here we have the product a product B and product C if we see the code that we have this is based on mock data where we have three different products based on the product type and in the HTML we have a matte card where we iterating over a product array and here what we have is the product ID product subtitled the product price and then we'll have some actions here where I currently do not have an implementation but we will do so later on and here we decrease the counter and then we increase the counter and here we also have the product description currently this code is based on the products component HTML but chances are that while the application grows someone else might need also to have this product card so how about get this code and refactor it and create another component the product card component so this is the code that I currently have and this is empty and let's keep it side by side and at first let's grab all the code from the products component and move it here the product card component is responsible to represent only one product so we do not need to have this iteration here and also let's try to fix these errors here and we definitely need to import some modules so we need to have the map card module and the Mac button module so let's go into the source code and have them here nice so let's go back to the HTML as you can see we no longer have these error message but what we can see is that we have an error into the product and of course we do have an error here and the reason is that this component is currently unaware of the product so we need some how to introduce to this component this product before we do so let's try to do something else here we have the product card component and we need to use this component specifically the selector into this HTML so we will replace this code with the selector at first let's grab the class name and go into the Imports and use it here and that will replace the previous modules who no longer need them and then we need to have the up product card and you know what let's replace everything here and I'm going to have the product card three times so I will have here the nd4 let product of products now somehow I need to provide this product here into the children component to do so I will introduce into the product card component the input and I will name it product and this is of type product by introducing here the product means that the children component can now accept a product item and we can provide it by using a property binding from the parent component and this product should go here as a name so it can be like the product equals now we have here to provide this product you know what let's change the name in order not to confuse with the same name thank you so what we're doing now is that whenever we are generating this product card we are providing this product and this product is the item of its iteration and if we now check the product card component HTML we said to have this kind of error message and this is because the object is possible undefined to fix this we can add the Elvis operator here nice so the child component seems ready and whenever we say that we have apparent child communication we mean that a parent component in our case this is the products component nests another component and in this case this is the product card so we have the parent and the child component let's now go to the browser to see what we have and it seems that everything works well we have three different products here which is exactly what we expected to have please note now that the communications that we currently have achieved is from the parent to the child component this is just one-way communication which means that we are providing a product to the child component how about now if I go on somehow to notify the pattern component that something happened the way that you are communicating between Dom elements is by events something similar is happening with a button right so we have the button and then we have the click event in the similar way we can utilize the events here so I will create an event and I will name it increase and I will initialize it equals new event emitter please note that you have to pick the event emitter from angular core in case you have more than one event emitters and let's also create one more and I will name it decrease so the child component supports two events they increase and the decrease let's now try to use these methods and I will do the following here we have the click and this is for the decrease so I will name this decrease Handler and also this is for increase and I will name it increase Handler increase Angler nice so let's now create these com these methods I have the decrease Handler and I will also have the increase Handler let's say now that I have here a counter and I will initialize it to zero and whenever I decrease I want my count to be like this and whenever I increase I want my count to be like this and not only I want to increase the counter I will also going to notify any other parent component any other component that uses the product card and how can I do so via these event emitters so whenever we invoke the increase Handler I can be like I want to emit an event which event the increase and I have to use the emit method as well whenever you use the emit event at that point we emit this event and let's do the same here so we have the increase and here we need to have also the decrease so how can we use this now let's close the product card component and now let's focus into the products component as said we can use the events in the similar way we are doing with the native elements like for example we have the button where we have a click and then we have a click Handler in the similar way we have now two events that decrease and increase in the decrease we can do something we can have here my decrease Handler and on the increase who can be like I come here to have my increase Handler let's save and let's now open this let's have them side by side and create these methods my decrease Handler will go here and also my increase Handler for now let's have only a console log would be like decrease and one more control log here would be like increase let's go to the browser to see what we have if we open the developer tools and we start interacting with these buttons with the plus and the minus we can see in the developer tools that will have the messages we have the increase and we also have the decrease this seems to work just fine but the confusion here is that we do not know which product to increase and which product we decreased we need to know the part component the products component needs to know which product has been increased or decreased so we have to provide some event arguments the event emitter is a generic type and we can say that I'm going to emit something of type the argument I mean of type product and the same goes here whenever we emit the event we can provide also the product this dot product and this will be our event argument again let's close the product card and let's focus into the decrease Handler and increase Handler these methods should know now the event arguments to grab the event arguments we use the dollar event this convention convention by angular this is how it works and we know that the event is of type product so let's go to this method my decrease Handler and here we can be like I have my product which is of Thai product and the same here and now we can provide the product into the console just to know which one has been increased or decreased now let's go again to the browser to see what we have and if I increase the product a we can see here we have an increase of product a nice and if we scroll down and decrease the product C we can see that we have decrease and product C and in this way we managed to accomplish a communication between the product which is apparent and the child which is the product card in the same way when we have a communication perhaps we want to manipulate the data before even we provide them into the HTML so for example let's say that if the price is 100 I won't automatically to make it 1000 just a random example so how can we interfere in this flow this input we can convert it to a Setter and I will be like I want the set to be a value and I know that this is going to be of type product and I also want to have here a product and this is going to return this dot underscore product So currently we don't have this so let's create it and here I will have my private product of product and let's also have this like this Union type undefined and we know that this product perhaps will return either a product or an undefined let's fix this as well and let's assign this product equals to value before doing anything here let's first see if everything works correct and here we can see that we have the product a the product B and the product C everything seems to work just fine and now we can have a condition here if my value Dot price or you know what let's change this if my value title equals to something I want the value title to be something else the point that I want to make here is that using a getter and a Setter into the input we can interfere into the flow and we can change the provided value so now we have this product equals to Value let's see what we have currently and everything that seems to work just fine and let's change the values so let's go to the products component and change this one the product a and I will have it to something now what we can see here is that we have something else so in this way we can say that we closed the cycle of how to communicate a part in the child component let's now focus on another way and this is interblade reference variable so let's now say that we're going to create another component and this is going to be our basket so ngdc I want under my components to create a component with name basket I want this to be a standalone and I want also for now to skip the tests I know that this is not a good practice this is only for the presentation let's now go here into the basket and I will do the following I will create two different methods the first method will be the apply all and let's say that I have here a console log by all and also I want to be like clear all and again I want to have a control log clear all let's grab the basket component and let's go to the products component HTML into the source code and import it here oh have the basket component and let's also now grab the selector the up basket and have this on top of the product card on top of the iteration of product cards so here I have my app basket we know now that the up basket the basket component has two different methods the first one buys everything and the other one clears everything we can create a template reference variable where we can divide whatever name we wish let's say basket or whatever and this template reference variable the axis of this is only into this template this is limited to this template and this is actually the instance of the basket component as we can see here in the tooltip I can create a button and into the click event I want to buy all and the message will be by all and let's duplicate this and these message will be clear all clear all nice so we have the basketball and the basket clear all and as said this is the instance of the basket component so let's go to the browser to see what we have but at first let's have here just a horizontal ruler and here what we can see that we have two different buttons the by all and if I click this we can see the message by all and clear all respectively so this is very useful whenever we want to have information only into the template another way of communicating is by using the view children we're going to do the following we're going to have access of the product card components inside the products component source code TS so we have the product card and we have also the products component and we want this guy this component to have a knowledge of all of these components of the product card how can we do this so we will use the view children so let's be like I'm going to have a few children and inside the parenthesis we can provide the selector of type string a function a provider token and what I'm going to have here is the class name of the product card component so here I have my product card component and I know that this is a list of product card components so I will have a name something like these products for the cards and this is of type query list so into the query list we have a list of items and specifically a list of product card components this is a generic type so we can have like product component here product card component or the union type undefined what we can do with this is the following that we can for example go here into my decrease Handler and let's have a condition if I have the product cards if my product cards are true C then and since this is an array I can use the method find and let's be like I want to grab the product and specifically the ID and I go on to mods with a given product ID and I know now that this is my found product pound product I have a typo equals this and what we can do is just Ctrl log here decrease and I will have the found product dot count let's also copy this and paste it here and instead of decrease I'm going to have here increase well we have here the found product and here we have the found product but you know what this doesn't make that much sense in terms of the flow because we already have the product the given product here and we have the product cards and we are finding it with the ID despite that this doesn't make that much sense in terms of a flow the point that I want to make here is that we have access to all the instances of the product cards so let's give it a try we have the decrease and we have the increase now if I increase the button here we can see that we have increased one and if I continue increasing we can see all the buttons here and the same goes on the other one so here we can see that we have the increase to 1 and the reason is that this is a counter for this specific product The View children is very useful as well and please note that the view children in the instance of the product card specifically are accessible into this component after the after viewing it hook before the after viewing it hooked the product card is not yet ready another way of communicating between the components is by using a service before we dive deeper into the service let me explain what is going on with this So currently we have the products which is a parent component and then we'll have a child component and we have a simple link of the products component which is the basket what we're going to do is to have a service here where all the components will have access to this service and specifically the example that we are going to follow is that this guy which is the child component the product card component is going to change something into the service so that the basket can be notified let's doing the following I will create a service here and I will name it basket let's again skip the tests and let's open the basket service and the go on the bus itself to house the summary of all the products that I have for example if I have here two products and I have here three products I go in the basket to have five in total to achieve this we will do the following but first we need to have an observable source which have a source here and also we need to have a stream the observable Source will be a private basket Source equals to new subject or you know what we can even use a behavior subject here the behavior subject is a special type of subject where it's a generic type so we can be like this is a number and also accepts a default value and the basket Source by default is zero this is private which means that only the basket service will interact with the basket source and how can we interact outside of this basket service who will do so using a stream so here I will have my basket dollar equals this basket source as observable and now let's have two more methods here and one will be the increase and the other one will be again the decrease whenever we invoke the increase method we will use the basket source which is the private one and we're going to use the method next to provide a value so let's say the number one but since this is an increase method we're going to know the value of the basket source and then increase it by one so we can be like the basket Source value plus one and let's do the same into the decrease but this time we will decrease it by one so we can now use the basket service into the product card for example we can go here into the Constructor I do not have a Constructor let's create one and I'm going to have here private the basket service let's import the basket service and now whenever we decrease the Handler I want the basket service to decrease this as well and whenever we increase the Handler we're going to increase the service as well what we have achieved so far is the following that whenever we increase or decrease where we are updating the value into the service and let's try now to use the total values into the component of the basket I will open the basket component and into the Constructor I'll have now as a public I will have my basket service and now let's go into the HTML and the only thing that I will have is a basket and into in the interpolation I will have the basket service basket using the async pipe now let's go to the browser to see what we have and immediately we see that we have the basket 0 which is the default value that we assigned into the behavior subject if I increase the counter we can see that here we have number one and now if I continue increasing the counters and here as well and here as well we will see that here we have now 11 and it will start increasing or decreasing the information appears here so what we managed to do now is the following let's go to the products component which is the parent component and here we have the basket each product card has a reference of the basket service and whenever we increase inside the product card we are increasing the counter of the basket service and into the basket component you use the same instance of the basket service and we are providing the information into the HTML using the interpolation so thanks for watching please let me know what you think in the comments below and do not forget subscribe and click the ring bell see you in the next video

Channel: Code Shots With Profanis

Views: 2,693

Keywords: Angular component interaction, angular, angular component communication, angular component interaction, angular components, angular course, angular for beginners, angular lesson, angular sibling component communication, angular training, angular tutorial, angular tutorial for beginners, component communication in angular using service, cross component communication in angular, learn angular

Id: pA2pi2czXbg

Length: 26min 20sec (1580 seconds)

Published: Fri Oct 07 2022

Reddit Comments

[u/UnitedRaccoon2522]

Great videos