Angular 10 - Send Message using Subject & Behavior Subject

hey guys welcome back to my channel on this video i'm gonna talk about the uh the angular subject and angular behavior subject so let's begin so i have the project which is running on localhost 4200 and this is my the project called toolset and on this project what i'm going to do is i'm going to remove the first thing is i'm going to remove the all the code on the html and i'll just type as test here and after that i'm gonna go in my console here and i'm gonna generate a two component and the first component is going to be header so ng generator component and i'm gonna generate a header component and after generating the header i'm gonna generate the uh the home component okay and i'm gonna also generate the service which i needed uh to send a message from one component to another one so the message the name of the service is going to be a message okay so now uh i have the home here i have the header and i also have the service call message service which is here okay and it's called the message service here so now the first thing what i'm going to do is in an app.html and an app component here in html i'm going to put my header app.header and the second one i'm gonna put my app.home so once i put the app.header and app.home it's gonna show me the header works and homeworks which is fine so i will go back to my header here on this is header so i'm going to create here a div call a header class on this one i'm going to type our input and i'm going to return our template reference variable call uh the food here so on this food i'm gonna now create another button here and this button is basically uh it's a send a message save right so whenever we click this button send message then it's gonna change the value on home home component so basically it's send a message from headers to home okay so now on header class maybe maybe i'll put some do your border here one pixel one pixel so lead and yes gray i mean gray color and give a padding at 10 pixel so now i'll see some of the border here which is okay it looks a little better so now i i need to send some message here on the food called pizza and when i send it now it should send this message to home okay so i'll go in my home here so i don't have anything at home so now let's create some services here we already create a service but let's write some subject on service so this is going to be a message service and in the message service i'm gonna create a new uh subject here and this is going to be a new subject and the type of the subject is going to be uh nothing else but the string and i'm gonna send this and i need to import this subject from uh new subject did you mean this subject oh i mean i created the same exact name there that's why it's giving a complaint so i need to import this subject from rxjx i already imported here which is okay so now let me uh write two function here the funcs function is a send message this is uh basically it's just send a message using a subject so i can use or this the subject.next function on the next i could provide any subject here so i'll just provide as a message and message is coming from my function here and this type is going to be of course going to be a string so once i send this once i send this message here i may want to send this message here now i need to create another function called received message and this message will not and it doesn't do not need any uh parameter but it will return observable and you will return observable of a string so i should create as a string and subject will return as observable and i need to put this as a return here so basically now this function will send the message using the subject and this mess this function will get the message using this subject okay so once i already i need to send this using uh the subject the message service which i created so i will go back to my header component on ts file now i will go directly on the header html but i don't have any event here so i'll click like click event and basically it just send a message okay and you send this out the template reference variable on on the send message okay and i need to create the send message here and i got this message here and now i need to also use that services which recently created called message service so i will import the message service in my constructor here message service so i'll just double check my name yep it is a message service so i'll go here in my header component and i write that i need to import it it doesn't know where it's coming from so i'll need to import the message service here so message is coming from the services uh not from services but directly inside the message service here so now i could use this uh the message service so message service that basically is going to send it and it just require one parameter called message so now whenever i click the button here whenever i put any variable here click the button it's already sending a message but it's not receiving by anyone so i need to create a receiving part on my home component here so here is a home works so instead of homeworks you know what i'm going to only create a call message here so it doesn't know what is the message at this time but i will go here and i will create our message here and message is going to be string and i'm going to use the same exact uh the service here and it's going to be a message service and this message service is also i need to import from my service which i created here so on ng on init what i can do is i on android i could register my message service of function which i created inside the service and that's called the receive function message and receive function will return observable so i could do a subscribe here so once i do a subscribe then i could get the data here and once i get this data then i could bind this data with my message here directly so now if i do a test and okay i see our html input element here which is not so good the reason why is when i send the message from template here that i send as a template itself so here it's sending a template but instead of this i should say the food.value here so now if i click it test here then it's going to send me a test right you can send a pizza and i send it no i can say a pizza here at all so this is how you can send a message from one component to another one using a subject and now i'm going to show you guys the what's the behavior subject so now is sending a data from one of home headers to home so when i refresh at first time it doesn't send anything when i clicked on send one it already sent it it's gonna send when i click this button but we could send ad in initial state as well right so in a message here when we create your subject but instead of subject maybe we could we could also create a behavior subject but when we create a behavior subject then we should provide the initial state here the initial state string here called burger if we send a burger then when you refresh at first time initial state then it's going to be written as a burger similarly like a reactor state when you create that when you provide the data at first time initial state then it's gonna render that data and if you provide any data here then it's gonna change that data with the data what we provided on using the behavior subject okay and another and more most important part is also once you are done with this subscription once you are do with subs subscription i could also bind this with the subscription and whenever you destroy your component you should always it's better to do uh unsubscribe okay so i'm not gonna do it here on subscribe but when you end on implement on destroy then i need to import on destroy so whenever it's going to destroy then just unsubscribe okay so it's it's a it's a it will helps you to clean up the the memory leak so that's all for this video guys i hope you guys learned something and i'm gonna put this code on github and if you like my videos please do not forget to like or subscribe and thank you very much for watching bye for now

Channel: Sam Lama

Views: 9,883

Keywords: Angular 10, Anuglar, Subject, BehaviourSubject, Rxjs

Id: 06s5Mu_jqMc

Length: 10min 29sec (629 seconds)

Published: Tue Sep 08 2020