Harmony in Components: Mastering Blazor's Dance of Communication – Parent, Child, and Everything.

hello guys welcome to net code help channel  in this video I will cover Blazer component   communication component communication at times  could be a headache especially when you want   to send or receive data from chart component  to parent or vice versa calling or invoking   method from this component at times could be an  issue I will cover all of these in this video the   objective of this video is to help you understand  how blizzard components can communicate with each   other also how they can send data it could be  in a list of models or a single data to each   component as usual I am Frederick and the source  code of this project will be available at GitHub   you can also subscribe to this channel if you  haven't done so and click on the notification   icon to receive updates as soon as I upload  new video I'm going to talk about three ways   of component Communication in Blazer now the first  one is a parent to chart communication the second   one will be chart to parent communication and  the last one will be component to component   communication I have three projects um created  already and I'll put this project to GitHub so   you can just go in there and I clone each of them  and I'll review so let's first talk about parent   to chart component you can see when you check  this pages I have two component the first one is   a parent and you can see we have chart component  over here and a chart component is now referred   into a parent component so when you have any R  component whereby you call this R component in   another component the component that you are  calling becomes the chart component as you've   seen over here so this is a chart component now  now what are we doing when you check here can see   we have a list of products here and the product  this product is the model that we have created   and that is the model here so this is just a  class which as ID and our name as parameters   and when we check this parent component as soon  as the page initializes we are populating this   product so we are adding sample um product to this  list of product here so these are the items that   we have so when this page loads this product model  here is going to contain this list now instead of   displaying this list on the screen in the parent  component we decide to create a chart component   and now Supply this list to that chart component  so we create a chart component here and the chart   component you first create a list of product  because here can see that this is going to be   the this is going to accept the parameter coming  in the data type must be the same the type here   it is a list of this product now when you check  the parent component this is a supply value and   you can see it is also a list so the type must  be the same so we create the same type in the   chart component and now what makes it special  that we have this parameter specified as soon   as you specify this parameter it tells this page  that it's going to accept this property that we   have declared here as a supplied value so as soon  as you put this here and we try to make a call to   this chart component it's going to expose this  parameter so this parameter here it is what we   declared from this chart component this now this  is a list of product so it must accept a list of   product of the same type so we are providing this  list of products here this you can see they of the   same type so we create this component the chart  component and that Reg component we specify the   parameter here and we Supply the value to this  the type must be the same now when it comes to   this we looking through this list and now we want  to display each of the item in this product so   when it Che this parent component we can say this  homepage or this component here it is a parent now   any component that is found within this parent  becomes what a child so that is why we say it is   a parent to child now parents are going to supply  value going to communicate values or data to the   CH component and that is what you see here let's  run this application and see so we can just click   on this to get it run all right so you can see  that as the page loot we have the data displayed   on the screen now this data it is coming from the  chart component the parent component supplies the   list to the Chart component and now since we've  C the chart component here this chart component   display or has a method that Loops through the  data and I'll display them in a card form and   that is what you see here the type that we are  sending here it is a list of product now can we   also send and um a single product yes we can let's  say you have the same thing you can make a copy of   this so let's duplicate this now in of the list  we're going to say just a model so this product   now I make it as just a single product okay so  we need to supply this now let's have a value   to this product so let's close this so is this  equal to new product okay let's terminate the   application first now once you have this as soon  as the page loads we can just copy one of these so product so we're going to say that product is  equal to new then within this new product we   can even specify the idal to one then name is  called to new product name you can see that we   are setting a value for this product now we're  going to go to the Chart component and now in   here we're going to make a copy of this and now  inste of the list you're going to say it is just   a single object so product okay now down here  this is a row so we can also have another row and this is row here now within this  row you can just display this so let's   use span now we say product. ID and we can have product do name so I can see that here it's  going going to accept this as a parameter from   the parent component now let's see so when you go  to this parent component we have this specified   and as soon as you do that we can specify this  product here and check the type here it is as a   product so the type that it needs is a product now  let's specify this and now pass in this product so   this is the data that we are passing in and as  soon as you run this you're going to also have   the same product being displayed you can also  specify an integer you can also pass in a single   value as well so instead of making this product  you can make it the data type as either string   or integer and you're going to provide the same  parameter and I receive it over there like that   you can see we have it set so there is a way that  you can communicate data from a parent to child   now let's have a look with the the next one and  that is the child to parent communication so I   have let me open this okay so now this is the  T to parent communication now here we going to   supply the value from the child to the parent the  first one was the parent to the child now this is   from the child to the parent I have the same  component here set I have the same chart and   parent component here check this chart component  this s component now has the product list inside   this method so we have a button here and this  button is saying receive product list now as   soon as I click on this button we wired it to  this event send product list now when it come   to this event here we create a list of product  there is a list and now we are populating this   list so that is what you see here we provide these  values to this list so as soon as this method is   called this product list get the data here now the  next thing is we want to receive we want to send   this list of product to the parent component this  is happening in the chart component so we want to   send this list of product to the parent component  so in doing so we have to use an event call back   method now we specify this event callback will be  a parameter because you need to receive it in the   parent component so you add this parameter as  soon as you add this parameter it makes it what   Global we have this event cback set here and  what is the data type or what is the type that   it needs to return since this a list of product  we specify a list of product if here it is just   a single single product you have to remove this  list and I maintain the single product if it is   just um a data type as integer or string then we  can specify this as string and that's all now we   give it a name so as soon as we click on this  button we populate the data here and as soon as   we populate the data we want to return the data  to the parent component or anywhere this method   is invoked so we call this method we invoke it  here and now we Supply the parameter that it   needs so this a return type so we need to supply  the same parameter value here and can see there   is a list of product from this product list so we  supplied it now let's go to the parent component   when it come to the parent component you can see  that we call this chart component here and this   chart component has an exposed parameter or an  event that is known as handle send product list   event when you check the chart component that  is what you see over here and it is available   in there because of this parameter that we specifi  now in the parent component the timee that it is   returning here it is returning a list check this  it is an event call back and the time that it   returns is a list so when you pass in um a method  name here you must specifi a payload as a list so   this is a method name and that is a payload that  we specifying it is a list that is returning from   this method now with this list that we have here  we create a list of products here then we assign   this list onto the list of product that we have  created we do that so that it becomes a public   variable which makes it possible to Loop through  and UND display the results here so as you can see   from this list as soon as this button is clicked  as soon as the button in this chart component is   clicked this event get fired as soon as this  event get fired it returns a list of product   we create a list of product container here we  receive the container from this we receive the   object into that container we look through this  container Here and Now display the result so you   can see that we are not populating the list  of products here we are receiving it from the   chart component and I display it inside this Loop  within this card let's run this application and see now the page is ready so if I click on  receive product this button is coming from   the chart component if you check this it is  coming from the chart component so when you   check the chart component you you have  this button here as soon as I click on   this button this event get fired then populate  this return to this invoke method making this   method um available to whereever that use this  chart component then Supply a parameter payload   to receive this list here so if I click on this  you will see that I have this object loaded now   it is not you see this a list we can also make  it a single data so let's make a duplicate of   this inside of this list you can also make  it as just a single data and handle product   not a list product so when this method is  called we can make a Cod here so private async task now we P the method so there is  a handle send product event we P It Here and   Now within this we must have this right  so this is a method now let's stop this   let's use the same method here so let's  call this in here so we can invoke the   method within the same button so if I click  on this button I want to load the list and   I also want to load the single data here so  instead of this you can just copy this now in   this page we can say that dot invoke so this  method here do invoke async let's grab this and here must be an a we so invoke a sync now  within this we need to specify um a single one   see this is a list so let's make a duplicate  of this then here let's specify as a product   so we can just grab this product and now  invoke it into this method okay so this   sending just a single product here as you  can see from this now within this one let's see now let's remove this method definition  okay so now we have this now with this list   of products we can just copy this come down  here and we say that product is equal to   new product then we can specify the ID  as one and now the name as new product so we can have access to this method inside  the chart component from this parent so when   it come here as soon as I click you see I have  I'm going to have this method and I return type   here it is what the product like this and  let's specify receive product list by this   time we're going to receive just a product  so we can just remove this receive product   okay then then we can just have another one as  a product list or not a product list as just a product then in here let's make a copy of  this method then we can have access to the   definition for this I you know this returning  just a single as you can see this returning a   list not a product list just a product  okay so in here we have to remove this product then we can now assign this product  container to this product here so once we have   this product we can just come down here so with  this this row down here let's create another one   so row and we can have a span class then in here  product dot we can have ID then again product dot   we can have name now let's run this so we have  this set now if I click on receive product you   can see I have the data also been received from  here so this is coming from the chat component   and has been accepted or received in the parent  component and displayed okay so that's the second   one and that is the child to parent component now  let's go to the last one and that is a component   to component communication this is also called  State handling or state container in this we   have to create a model as you know already now  we create our interface implementation class now   we have our event and this is a product event  we have a list of product then we have product   count so this is going to handle a list of going  to contain all the data for product now this is   going to count the number of product that we have  in this list okay now this method here is going to   load the product to this list remember that this  list here it is just a empty container so you're   going to have method here to load a data a sample  data to this product container after loading we   want to get this current uh product count and  assign the value to this when it come to the   next one we have a list of mine cart now this is  going to handle the count of the product in this   mine cart as a list this method is going to add  a model that a product model to this card list   so here we are just loading we're going to have a  default value but with this we're going to supply   the value to this to get added as soon as it gets  added we want to get this integer here or this   variable here counted so this count and I get the  value stored into this cat count here there is the   interface that we need to create now when you go  to the implementation and that's a product service   we see we create um a class product service and  it inherit the interface so we can have all the   implementation here that is the event that we  created we see it's a global event so it is on   top here now this is a list that we created in  that and this is also the product count now this   is a method so we see that here this product list  as soon as this method is scored we want to load   this list of items to this list of product here  or this container as soon as you load this product   count count all the items in this product list and  I'll set the value to this product count so when   this method is called this is going to work we're  going to have the current count here everything   is working but in another page if you want that  page to get refreshed we need to invoke the method   here so see this product event we are invoking  it also when you go to the next one we have a   list of my cut here we have this cut count and  this is a method and this method we must provide   the model of product and we add it to the list  then this cut count we assign to the list here   when you count it the value we assign it to this  cat count um variable here then the same thing we   invoke this method so when you invoke this method  it is telling this page to make it available and   to check if there's any page who has subscribed to  this that that is going to rerender or refresh now   let's see after doing this the next thing that  you have to do is to invoke not to invoke to   register this in the program. Cs file by creating  a dependency injection so we create this this is   the interface and that is the implementation class  here let's go to the index we inject the interface   we create an instance of this now when you come  down here we are subscribing to that event so we   see we have an event in this product service and  this event is called Product event so we use plus   equal to we subscribe now after subscription  we have to unsubscribe so we're going to use   this dispose method and this is coming from using  or injecting this ey disposable then since here   we use this plus we can use minus to deduct or  subtract right or remove it so we have to also   unsubscribe to this method so when you perform  any event here which has in connection with this   interface when you call any of that two method  this event is going to be broadcasted and this   event since it has subscribed is going to refresh  this page now let's see we have a list of products   here and that is this list when we have this  method known as low data now this method is   coming from a button that have been wired with an  event known as low data here so we we see that we   have this event when it is clicked we load this  data now to load this data we call this product   service and now there's a method known as low  data as soon as you call that service when you   check this it's going to populate this product  list after populating we can have access to   this product count and this event is going to be  invoked so when you go back to this home the index   you can see that after it has been invoked we can  have access to this product list the product list   here we are ass signing to this product list the  product list from this product service because   when you check this product service you can see  that after populating it is assigning the value   of this to this product so this product is going  to contain the list of the items here so that   is why we are assigning the list to this product  after doing this then we Loop through this product   and I'll display the result so you can see we are  displaying only name and we have a button that is   when click as soon as a button associated with  each item here it is clicked then passing that   item passing to this model so we call this method  sorry so we call this method known as ADD product   when it come down here it is accepting this as  a payload because this is it the input so it   receive it over here and now there's a method  known as add to cut service from this product   service and this method needs a model as product  so pass in that model and as soon as you pass in   that model when you go to the service as soon as  a model is been passed on this method is invoked   it add now it gets count to the current one that  we have then invoke this now when invoke this we   want to display the count of items in the cat we  want to also display the count of items in the   product list so we want to use another component  because here we want to do component to component   communication so in another component that  is a main layout we want to re inject this   product service that's the interface and now here  we are using this product service do cut count we   are using this icon with this icon as IO or oi  cat then we want to display the product count   so the total items in the count the product  list display it in another component now to   make this work we have to implement or subscribe  to this evoke event so when this event is being   invoked here it checks which of these Pages have  subscribed to this event invoke method then it   checks the main component has subscribed so it's  going to rectify it's going to refresh this the   index page has also subscribed and it's going to  refresh that and get the current value as set in   this the service here that is all that we did so  we we have the interfaces and now we have the one   interface and eight implementation we have a model  we register the interface in the program the Cs   file we inject it into the index and we call the  method inside the interface then we also call the   method or the variable uh the placeholder inside  this main layout to display the current count now   when we run this let's see what we have so that  is it now when this page loads you can see we have   my cut as empty product count is zero if I click  on load data you can see the current count here   of the product gets notified so this page will  rendered and I you see we have 11 so when you   count this item it is 11 now if I click on any of  this that is where the method known as at to cat   get fired and as soon as at to cat get fired it's  going to add this method or this um mod here soon   it has been added to the list it also so invoke  the method and now this the same component that   also subscribed so this p is going to also get  notified now check it and see if I click on this   you we see have atoc cat as one if I click on  this it has Chang to two now as soon as it gets   rendered you can see that this highlighted area  is going to go off now check and see if I click   on this you can see it has R rendered and now we  have three click we have four five six seven so   this can be used whenever you want to create  an e-commerce and e-commerce you have a cut   add product to cut as soon as the user clicks you  have to use this state container or state handling   to just communicate and I'll hold the data I'll  store the count of the items in the list and I'll   display that but you know in the new netblazer  you can use use um session to do that that is   a um session layout maybe I'll talk about that uh  separate one in the next video but for now these   are the three ways that components can communicate  in Blazer we've seen um parent to chat component   you've seen chat to parent component and I you've  seen component to component communication each of   these projects will be put in a GitHub so please  check the description out put the various links in   there you can just go in there and I'll clone  it thank you so much for watching this video   I believe this is clear if you have any issue  to you put it at the comment section and I'll   attend to you thank you take care of yourself and  I'm going to catch you up in the next video but   don't forget if you haven't subscribed please  do that if you haven't also likeed this video   please give me Thumbs Up by clicking on that  thumbs up icon thank you and see you again

Channel: Netcode-Hub

Views: 992

Keywords: blazor, components, communication, parent, child, component, web development, .NET, C#, tutorial, tips, tricks, methods, techniques, options, choices, comparison, pros, cons, advantages, disadvantages, benefits, drawbacks, scenarios, use cases, examples, code, demo, explanation, guide, walkthrough, step by step, how to, learn, beginner, intermediate, advanced, easy, simple, fast, efficient, effective, best, practices, standards, recommendations, suggestions, advice, help, solution, problem, issue, question, answer, video, youtube, channel

Id: SoPEj9LEBdY

Length: 29min 58sec (1798 seconds)

Published: Fri Nov 10 2023