.NET 6 Blazor 🔥 Component Communication (Parameter, EventCallback & State/Service)

hey friends i'm patrick god and welcome to this little blazer tutorial this time it's a bit more a beginner's tutorial maybe so i guess you already have a little experience with blazer web assembly but as you can see in the title it's about component communication here so rather basic stuff what we want to do in this tutorial is there are three types essentially three three types of component communication meaning parent to child child to parent and then component to component where there is no child parent relationship at all so how would you do that can already tell you it's about state handling or you can also call this stuff then state container or well i usually just call this a service so you would need a service then to enable this communication between two components that are not child or current or anything so that's already everything about this tutorial and if you like it and learn something i would really appreciate it if you click the like button and maybe subscribe to my channel thanks a lot for that and don't forget the bell icon that would be really nice because then you get a notification as soon as i upload a new video additionally please have a look at the news letter i am planning on creating a big course that focuses on landing a job or well first getting the skills that might land you a job get you a job in the net and laser developer world meaning we will build a couple of applications we will also have a look at interview questions also a little bit cover a little bit of agile stuff like scrum maybe little devops so the the whole package you might need if you want to get a job in this industry so maybe this is something for you and last not least as always guys my coffee is already empty as you can see that's really really sad but thanks so much for supporting me by buying me a coffee this really helps as you may know we've got a little toddler he's awesome but sleeping is not his favorite activity so sometimes you really need some coffee to be able to make these videos here thanks already for watching this video and now enjoy this tutorial all right we create a new project and this time we create a blazer web assembly app we can of course already find it here for instance we filter by the blazer projects and then it plays a web assembly application so we click next and let's call this one for instance blazer component communication tutorial big name but i think that's okay so blazer component communication tutorial it is we configure this for https okay that's nice we can do that but doesn't really matter for this little tutorial the framework is net six and now important or well it's up to you if you want to use it asp.net core hosted for this tutorial um in my other tutorials it's usually different we do not have to select this right you do not need a web service here i just want to show you the component communication inside of the blazer client application so this is totally fine here we create the project and then let's see all right so here's our project now i assume you have a little experience with blazer already although this is more of a beginner's tutorial what we see here is just our client application our client project again if we would have selected asp.net core hosted then we would also see a server project here and a shared project usually you would add your models for instance to the shared project and the the server project then would be a web api where we can make some http calls for instance but we can close this here and let's have a quick look program cs is the only file we get here that well in essence runs or builds our application and runs it runs it then we also register some services here like the http client if we need it but for us very interesting are the components and you find the components already that are generated here for us in the pages and the shared folder if you already know this please have a look at the chapters at the bottom of this video and just skip this little section here and then and move on to the communications part what i want to show you here real quick is already the example application because we've already got the parent to child communication here so let's have a quick look at the index eraser file and what you can see here is that we will use or edit a shared component which is called survey prompt and this thing here is a parameter and with that parameter we already tell our child our child component not the application our child component what to use for the title because me now go to the survey prompt again this is the child component here you see this parameter here little property called title and with that attribute we allow the parent component to tell our child component what the title is so let's run this real quick and then i think we're done with this example application and we will build this again by ourselves so parent to child is i think the easiest one of all the communication ways here we go to no we are here already so we are here on the index page and this is i think this was the title right let me go back yeah how is blazer working for you and again we go to the survey prompt and here we see then the parameter strong means that it is displayed in bold letters so back to the page here we see that how is blazer working for you and this stuff here please take a brief survey and tell us and so on is then here in the child component itself now let's test this again by changing that maybe so let's say hey there how are you today we save this and let's see if hot reload works yep this time it worked really nice well i've got the latest version now i think it was the update of yesterday or the day before yesterday 17.1.0 that's why by the way i think you also saw the.net maui templates i will upload a.net mario tutorial soon so maybe you wanna subscribe to my channel then you will get a notification if you click the bell icon when this new video is online but now we are talking about communication between the blazer components so this is already the parent-to-child com communication but let's build this again by ourselves what i want to do is actually i want to use the counter page here and as you can see here with click me with this button we can increase the counter right and now a typical thing for lots of web applications are notifications right so usually on the top right or something you have a bell icon for instance where you have a little badge then with a count of notifications pretty similar to youtube actually and that's what i want to build here but first thing is i will add uh this icon here inside of the counter page inside of this component and then we will use the parent to child component to tell this notifications count component then how many con notifications we've got then the next step would be child to parent communication where we tell the parent that we will reset this counselor and then the actual thing we need when we use this kind of notifications icon or component we will place this here in this top bar and this top bar has nothing to do with this counter page so there's no parent no child there's just component to component and these components lie anywhere in the this application and well how do we do that right so one step after another first we build our sweet little notifications count component so back to visual studio and now here in the shared folder we add a new razer component and we call this notifications count and we always want to rebuild the app and apply the changes now how does this look first in our code block we've got a parameter again so this is a property in essence so prop yep this works public end let's call this count what i did here by the way this is a built-in snippet just type prop and then hit tab once or twice can never tell if it's once or twice and then you see the getter and the theta automatically added for you and now very important here parameter this is the attribute we need and now regarding the html part not that big i guess let's say this is a button of type button that we can give this a class already these are bootstrap classes so this should be built in with our blazer web assembly template here and since i wanna add a badge we have to add something else first position a relative and then i can add the badge fixed on one of the corners of this icon or this button and then i want to see the bell icon of the open iconic icons that would be oi dash bell like that and now for the actual account we say span and this thing gets some classes looks more complicated than it is position absolute top dash 0 start dash 100 translate middle it's a badge and then a rounded pill and the last one so it's in red in a red color bg danger for background danger and then the last thing we need is we want to display this value here so at count and with that then we should see the actual value okay so this is our component for now and now again we use it in the counter page and to do that let's say below the title here we add notifications count that's it and now we can use our parameter with add current count and that should be it i would say we try this i'll let's see there it is nice see that this is now our little button here with the badge with the number or the count of notifications and when i click here we see this is the actual count great so that's already parent to child and now the other way around what i want to do here is i want the child i want to enable the child to tell the parent that we want to reset the counter right so the counter will be reset or the notifications count component wants to reset the counter but the value actually comes from the parent component the counter page so there should be a way to tell the parent to do that and what we need is an event call back so we go back to the notifications count we add another parameter so prop once it was tab once not twice once and then we call this reset count and type again is an event callback and again we need the parameter attribute here all right and now the next thing is we have to invoke this event and that's why i use the button here because now i can say on click i want to call a method that we will implement in a minute invoke reset count so this will be the name of the method let's copy this and now let's write this method here real quick private async task invoke reset reset count and this is pretty small so we can use this lumped expression here the arrow parameter the arrow operator awaits reset count again this is here our event callback then we say invoke async all right and with that we invoke this event so these are now the changes for the notifications count again quick recap we added this event callback we use this event callback here in this button and for that we call this method here that simply invokes this event all right so the notifications count does not really have lots of logic here it doesn't do anything except just invoking this event and with that the child is telling the parent that well something is happening here now let's do something with that information and now to do something with that is part of the counter page in our example here and what we can do now is we add another parameter reset count right so it looks pretty similar but this was a value and this now is an event callback and with the event or for the event we want to call another function and we call this one reset count for instance and we implement it down here we say private void reset count all right and now here we say current count is zero and also let's display a notification message so we see really that something is happening here and this notification message then we'll get a text like counter has been reset like that and of course we need it up here as well so let's say private string notification message is string empty okay and we display it let's say down here so let's add a paragraph add notification message okay so again real quick reset count is the parameter we call this new function reset count this function is here current count is zero notification message will be set to counter has been reset and we display this thing here and of course we have to define this message now it hasn't been restarted properly it looks seems to so let's do that manually again and now we've got it here hope this is the current version increasing works as works still works and now let's click here yep this works as well great so the child now told the parent reset the counter please and again we can start from zero awesome okay now this was the easy and simple part and now it's getting a little bit more complicated now as i told you i want to move this button here on top so instead of this about link i want to see my notifications and when i click on this button i want to reset my counter and still when i click this button here click me i want to increase the counter and tell this component that the value has been changed but these there is no parent-child relationship between those components so how do we do that well this stuff is called state handling or you can also say we need a state container whatever name you want to choose here as always in the web or in general in the development world there are a couple of names for all that stuff is really important in my opinion i would say we use a service for that and this service has some functions and some values and the components that want to make changes to that notifications i can hear all that notifications count component just use this service then all right so this is in essence the whole magic and when you know this it's not that complicated anymore so what we do then is in our little application we create a new folder first so it's a bit more organized and let's call this folder services and i want to add a notification service so what you can do is either add another folder for notification service or we just add our notification service class here directly but what i want to do is i also want to add an interface here so we can inject this eye notification service use dependency injection here big advantage is maybe sometimes or some eventually you want to change something or try something else or want a unit want to use unit tests implement unit tests then it does make sense to use an interface and inject this thing because then you can have several implementation classes and when we register the service then we can just change the name and you're done so it is less work in the long run but now at the beginning maybe it seems it's a bit more work but please stay with me here you will see it's not that bad okay so we add a new item and this is an interface so wait interface so i notification service all right perfect and now we also add the implementation class and this thing now is called notification service all right and this implements the i notification service like that all right now here in the interface we define some stuff first we've got our account so similar to the actual components i think big advantage again is that we do not have all that logic or we don't need it in the component then we can actually remove all that and just use the service for this so the components get smaller which is i think a good thing and you can really focus on really the the the logic the component needs and only the html code and less c-sharp code in the component so i think it's more organized but that's again it's just my way to do all that so we got the count and we've got a function again to increment the counter this time so with that when this is called we just well increment the counter by one another function to reset the counts and now i can already tell you that we need an event again this time it's of type action here so event action on change and this is already the whole magic really this is how this works how the component can tell all the other components that something is changing here because when it changes the value changes the count value then all the components that want to know this can subscribe to this on change event and well with that subscription they then know that they have to re-render itself and get the new value and by talking about subscriptions i know this is really cheesy but maybe you want to subscribe to my channel i would really appreciate that all right and then the implementation class now you see there are some errors here does not implement lots of stuff but what we can do is we can just press ctrl and period or use the light bulb menu here the quick fix menu with the light bulb implement the interface and we've got a lot of stuff now you don't want these exceptions here so let's remove them get set and we initialize that with zero the event stays the same now increment counter well increments the count value and now says on change invoke we need the question mark here because if no component subscribed to that thing then it is null and this would lead to an error then so please make sure to add the question mark and the last thing here reset count we set the count to zero and then say again on change invoke and that's our service last step is to register this thing for that we go to the program cs and now here we can say builder services add scopes but then in angle brackets we say for the i notification service we want to use the implementation class notification service and we also add the using directive for our services here another thing we can already do is add this using actually in the imports eraser file because with that we do not have to use the complete namespace in our components so this makes our stuff our implementations a bit easier and now to add our notifications count in the top bar we go to our main layout razer file and here here you see the about link and now you just say notifications count close it already and that's it see no parameter used nothing like that we save this let's just stop the app so it it's not getting on my nerves and the next thing now is implementing the notification count because we have to change it a little bit so back to the notification count and now we have to first inject our notification service because we want to access it all right so for that we enter at inject i notifications notification service and we call this thing notification so this like that and the other thing is we implement the i disposable interface so that on this post we unsubscribe from the unchanged event right so it implements i this posable and now this is getting interesting actually we don't need any of that stuff anymore so let's just remove it and now you see it's not available anymore right so we can use our notification service now for these values and the function so notification service count the first thing and here now we use notification service and then the function reset counts all right let's put this a new line like that and then you can see it a bit better all right so using notification service here and here but now what about the events well what you want to do is as soon as the on change event is called we want to re-render our component so what we can do is already when this notifications count component is initialized then we subscribe to the unchange event we do that with one of the three lifecycle methods we've got uninitialized on [Music] parameter sets and on after render see it here in a second to override it we enter protect it overwrite and then avoid and here you can see this right so we've got uninitialized and also the asynchronous version of it parameter set well uninitialized is the very first one so when this component is initialized then this thing is called next is parameters set well when parameters see it here method invoked when the component has received parameters from its parents in the render tree and the incoming values have been assigned to the properties so when you when you want to make sure you have different parameters or what also an option really where you have to pay attention if you use a page for instance with parameters and the page itself might change the parameters this happens for instance when you're using pagination so you have a result a search result of items don't know what products maybe we do exactly that by the way in the blazer ecommerce course so maybe you want to have a look there's also a four hour preview here available on youtube so maybe this is something for you and in there then when you click on the other pages right you are on page one and then you switch to page two with that we change the parameter in the address bus so the parameter of the actual page route and when you want the the component to recognize this change you have to use on parameter set uninitialized won't work on parameter set that's important here okay and the last thing is on a random a on after render and here you can see method invoked after each time the component has been rendered and this happens a couple of times actually so that's why they got the these um bool first render argument here because usually you would check if this is now the first render then do something and if you don't make this change this uh this if statement if you don't add this if statement here you don't check that for the first render then you would see and use the console for instance that um well the component renders a couple of times and every single time then you would call whatever you are calling there or you will execute your code in this case okay so that was a bit uh well that was more than i actually wanted to tell you but maybe these are valuable information so but on initialize now we say notification service on change plus equals state has changed this is the magic and it tells us notifies the component that its state has changed when applicable this will cause the component to be re-rendered and this is exactly what we want meaning the count value has changed and then we tell our component that it should re-render so this is everything we wanted to do here and again to well don't risk any memory leaks we use the dispose method here so avoid this pose we say notification service on change minus equals state has changed all right and these are all the changes for our notification count component and the last thing is now our counter page so in here again we inject the notification service so at page i notification notification service notification service not page inject what am i doing here focus patrick focus okay that's what you want to do now we just uncomment this thing here like that or we could also remove it but that's not that important for now and then the last thing actually increment count for that we say notification service increment counter all right and that's it so we remove this thing here actually and injected the notification service and the only thing we do is running uh they were calling the increment counter method of our notification service so we go here count would be incremented and then we call on change invoke and then in our notifications count we would see hey something has been changed so please re-render and then we get the actual value and the other thing is that we say reset count and with that the again the method here says okay the count is now zero and we invoke this event so i would say we save this and test it one last time there it is all right maybe i add the cons open the console so that we see it a bit more in in the middle more centered here and yeah could add a bit css so you well this doesn't matter i guess so do you see the badge you see the bell icon now we can say click me and we see that the value has been changed isn't that great so we see really see that now the communication between one component and the other and there's no parent-child relationship works and again we can reset and this works as well and now here you see that these are really different right this is another count value then this one here you can reset again and this really is the value of the notification service and this is the value of the counter page so the default example application stuff and here it's our notification service all right that's it if you want to check out the code please head to the video description and go to the github repository i will push this and then we're done there you have it guys was pretty easy right so parent child child parent and then the service that enables every component to communicate with each other this is everything you need to know if you want to build well components and the component communication so thanks a lot for watching and if you learned something then please consider clicking the like button maybe even subscribing to my channel it does make a difference thanks a lot for that don't forget the bell icon to get a notification when i upload a new video also you may be want to have a look at my newsletter it's not only about the upcoming course but also getting these videos here earlier in your inbox and maybe also other articles so consider subscribing thanks a lot for that and the last thing thank you very very much for all your support it's the last drop of coffee here means a lot to me and helps me creating these videos regularly as you may know already so again thanks a lot for watching thank you very much for your time and i hope to see you next time take care you

Channel: Patrick God

Views: 14,474

Keywords:

Id: UvFmHWPB70g

Length: 33min 8sec (1988 seconds)

Published: Tue Mar 08 2022