Share data between Between Your's Micro Frontends | Micro Frontend in Angular

are you tired of your microphone tent acting like a stubborn teenager and they are refusing to talk to each other then fear not we have the solution in this video we'll discuss about the magic of custom event emitter by which you can able to make a microphone and listen to each other and work like a well oiled machine so sit back grab a drink and get ready to learn how to bring Harmony in your microphone and architecture let's start the video hi everyone this is subrath and you are watching fun of heuristics on this channel you will get to know about the programming languages framework and all about the algorithms so please consider subscribing and hit the Bell icon if you haven't yet so before we jump to the code we'll first discuss about why we need a communication between two different micro front end and you might ask like I will make a input output event and pass that to the base app and base app will handle it's like having a middleman between two of you and and you will pass the command to the middleman and it will pass to the other person believe me it's not good so we'll see how you can communicate between each other directly obviously there will be another way using storage like a local storage session storage or Estate Management application like ngrx where the state will be shared between all the microphone 10 then you can do that but the easiest way by using a custom event emitter and we'll do that so we'll go to the code now and here I have created another micro front end and if you don't know how to create a microphone tent or a web component we are treating a web component here as a micro front end so you can watch the first video of the series I will link them in the card so that it will be clear for you if you haven't watched them first go ahead and watch that then come here so I'm assuming you know this so we have created a micro front end here another microphone tent due to the lack of name I just gave the name as app micro front end too and the first one was app micro Fe in our base app I have added this to micro front end I'm loading it legally and again if you don't know how you wanna load it legally this is how you will be but if you want to be little more clear go to the second video of the series I will link them in the card again so it'll be more clear on that but this is how it is it is pretty easy so here we have two micro front end URL which is hosted in 8000 and 8080 and we are pointing that both here I will do some CSS adjustment just to make it side by side and I will come back when it's done so now it's seems like this is one and this is two so now we'll have a communication between these two like microphone and one will send some data to microphone and two and vice versa so for now we'll go to the microphone and one and add a event so that it can emit the data and then we'll go to the Maca content 2 and see how to consume that so here we need to add event that means here we need to create a custom event so for that we'll just add a method called send data which will use to trigger from a button click and inside that I will create a event which is a custom event and the name of the event I have given at the event you can give any name and the object you want to send here I'm just sending a simple object like details and custom mfp like Hello to custom mfe2 click hello to mfe2 and we are dispatching that event on the click of send data so we'll go to our app component and here we need to add a button which is calling the send data and the name is send data so that's all that's all for the micro mfv1 so just go ahead and run the bundle so it will run in background we'll go to now our micro MF V2 we need to listen to that okay so inside our on init We'll add our form event method so what we are doing here this is a form event from RX chess you can also use add event listener like this like add event listener and you can also listen to this event so that is also a valid syntax but here I am using a form event because we can unsubscribe this event when our component is done so just go ahead and lock this one so as you can see here we already got our Button as send data and here on click of that we are making a call Ascend data so finger cross and and now as you can see we got our event here inside our event we have a property called details which we have added as a details here so I've added my message here like grabbing it from the event.detail and we'll go to the HTML here and we need to run the bundle here and once this bundle is finished it will be hosted and that we can see in our application so now we'll go to our application we'll just do a hard reload so that it will not interfere with our previous cases and if you press the send data see we got our hello mfe2 it is from mfe1 it is not Center Airline that's why it's coming like this but you got our event and now the same can be done with each other as the microphone and one is a custom event so a we are emitting an event which is accessible across the session of the browser means across this tab so now you can access this event in all of your micro front end so the benefits here is initial I was talking about if you want you can use a output or input method like you give output from a microphone 10 and you can grab that event here and the base app and act upon it like do something it and pass that to the second microphone 10 and microphone I will do but that will be heavy dependency on your base app and that will keep on increasing in the future so the safest solution like to communicate and set Harmony in your microphone from the architecture eat start communicating between these two you can add in your documentation that all this event we are emitting like if I'll go to the micro fp1 you can say that the list of events we are emitting and this is the data type we are emitting so all other microphones who are listening to you they will listen to these events and act upon it that's all so that's how easy it is so now you know how your microphone will not behave like stubborn teenagers who who don't talk to each other and if you found this video helpful so please hit a like button so that it will be help for the channel as well as for the video so that YouTube algorithm will be promote this to many people and please subscribe to the channel and please like and share the video with your friends family colleague will going to meet in the next video till that stay happy bye bye

Channel: Fun Of Heuristic

Views: 12,149

Keywords: Angular, programming, mfe, micro frontend, angular microfrontend

Id: PlvTveHGe8M

Length: 7min 25sec (445 seconds)

Published: Tue Dec 27 2022