Angular 10 Tutorial #71 - Component Communication Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular full tutorial series for absolute beginners of late i am getting lot of emails and requests and comments section to cover all about components how does the components communicate with each other what is input directive what is output directive how do we use it how do we come consume data between different components using services how do we customize the templates etc etc i'm also getting a lot of feedback in the comments that when they go to interviews they ask a lot of questions around component communication etc so i'm bringing you this particular episode which is a master class on components where we will deep dive everything and all major aspects of components in this particular episode after this episode i am confident and i want you to be confident at the end of the tutorial that you know and you have mastered angular components into end let's get started this is part 71 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in the series uh soon i'll be starting a live project as well that is next week so stay tuned for that as well the playlist link is in the description box below notes and code github link is also in the description box below make sure to check out the entire tutorial playlist because i have covered a lot of details from ground up from scratch to most advanced use cases after this series i'm sure you will be able to learn and master angular and i'm always here to help you if you need any help or you know need any doubt doubts cleared today's episode 71 where we are learning about angular components explained in detail after this tutorial you will be absolute master in angular components you will be able to create generate components use them create child parent child relationship use input output directives use services and much much more i hope and i once you complete this tutorial i want to hear from you that how confident you feel after completing this master class on components that will give me an idea about if i need to bring more such master classes for you i hope you will enjoy this tutorial let's get started so what are we going to learn so we are going to learn a lot of things today so keep making i'll keep making notes for you so that you don't lose track we'll learn how to create components use different style different templates different style urls learn how to use components from different modules create learn how to communicate between different components using input and output directives we will learn how to communicate using service and we'll also learn about angular life cycle hooks all right so without wasting any time let's jump into what we are really good at which is coding let's get started alrighty so what i have here let me fire up the application so this is a basic angular application right um i'm not going to show you how to um create an application from scratch i've done that in the in the previous episode so of this particular series so make sure you check it out so which is nothing but to install angular cli and then create a new project using ng new that being said this is how the output looks so we have the basic this is the starting of any angular application so if you are absolute new uh please do check out angular 10 playlist which is in the is in the description box below this i have shown you how to get step by step install angular cli and also generating the new angular application which is ng new app name right i'm just giving you commands so that for our friends who are new they can easily see this so this is a command you would run to install the angular cli and this is a command you will run to create new angular application all righty so once you do these two commands you would see and once you do run the application trust me a lot of times people do ask such questions as how to do so i thought i'll just make them right so you need to follow these three commands which is install angular cli then create a new app and then do ng server which i just did so it should you should see compile successfully and once you have it then we are good to learn about components that is what we are going to do in today's episode all right so the first thing uh let's learn how to create angular components right okay how do you create angular components we do it using command ng generate c or we can write component either way is fine you can write a shortcut which is ng generate c and followed by the component name so i'm going to open a new terminal here and i'm going to type the command and g generate i should be in the should be in the project directory and i'm going to type ng generate c and i'm going to create a a component by the name header right so here i'm going to create a so this is the name of the component so you see here header got created our app module got updated so this is how you create an angular application component now how do you use right how do you use angular component and you might be thinking these are very basic yes these are very basic i'll start with basic we'll keep on making it complicated as we progress in the application to the most complex use cases so stay with me even if you know these things it's a good recap it's a good refresher course to learn everything about angular components all right so how do you use angular components take this component you will have something called selector right copy that go to component wherever you want to use it now there is a trick here remember there are some more interesting interview questions that are asked it's a directive so you will use app header right so see app header is the name of this particular selector of this component that i just created right now see here the question comes can selector name change can i change it yes of course we can have any name that we want i can call it arc header which is fine i will use everywhere arc header right these are asked real time in interview questions so make sure you follow with me can selector can i provide a custom right so that was the question can selector name change or i can say can we pass custom selector name yes of course like how we just did which is it was app header i called it arc header and i can use it as arc header in any anywhere wherever i want to use it so how do you use it use the selector tag as director right like this so this is a selector name use it in the component which is arc header and you should be able to see the output here which is header works because it's included okay so that is how you use angular component now see that it will keep getting tricky from here how do you use angular components from different module now this is tricky guys lot of people will miss out on some concepts this component that i created was in the same module like app module it was available in app module that's why i could directly use using the directive name now how do you use angular components from different module so let's see that first i'm going to create a new module i'm going to say ng generate module and i'm calling it say users it can be any module of your choice it can be a lazy loading module also that's fine now i'm going to the users module so i am in the users module and i'm going to generate some components here i'm going to say list users so you see now we created a component under the users module which is list users i'm going to create right so now i want to use now take this use case we have users module inside this we have a component which is list users now i want to use list users so in order to do that we need to do two things first import the custom slash newly created module into app module right and how do you do that so go to app module import users from dot slash users slash user module right so what i'm doing here is i need to put make sure that that instance of module is available in app module imported in the imports array i have now imported the module but can i use it let's see if i can use it and then i will show you why you cannot use like that so take the selector name go to app component put it here what do you expect it if you go by what i explained you in in point number two you should see that working but no it will not work it should give you error let me show you the error first you see here it gives error why because it is not exported so in order to make it work see here it says app list users is not a known element so for that to fix that one we need to do go to users module because that's where the list uses is and then we will copy this and say we need to export this component like this so whichever component you want to make it available outside the module like now we are trying to use it in app component which is outside this user's module that's why we need to export this particular component now see i exported the component so i can use it in app component there shouldn't be any error so that is very important often asked in interviews that how do you use angular components from different module so this is answer import the custom module and then export the respective components that we want to use outside of the module in point number two we were using it inside the same module that's why we did not write export but here we are using from a different module that's why we exported it this is point number three now point number four how does angular components communicate now this is one of the most uh frequently asked question in interviews right communication now there are different ways of doing this so your answer should be angular components communicate via mainly two methods one is using input and output directives right the other thing is using services right so you have input and output directive that you will use and we'll we will use um services to communicate between different components right so i'm going to show you example of both now so let me first create one more child component so that way we first we are learning about input and output now so let's do that all right so for this we need some relationship like parent child now what is a parent parent is the one which is sending sending the data to child and what is child child is giving back the data to parent right all right so that being said let's go ahead and i'm going to use this so here what i'm going to do inside users i'm going to create one more component i'm going to call it filter users so from list users i'm going to send data from list users i am going to send data to filter users and this will be input right input to filter users and from filter users so here it would be filter users now see the direction of the data now here filter users will give back data as output and it will be consumed by the list users right see this so list users will send data which is an input to filter users filter users will give output which will be consumed by list users so that is input and output or also called as parent child relationship that some people refer to it as all right okay so we got two components one is list users one is filter users let's get started so what i'm going to do first since they're in the same module i'm going to call this inside the list users and i'm going to say app filter users so what happens is now this should be easily visible here which is filter users work because it's part of the list users right so list user works and then app filter works is called now let's change some value we are inside filter now see it will change we are inside filter right because these two are coming from list users so if i remove this th that will not be displayed right so perfect so it means that our app filter users is being recognized inside list users now our use case is to use input so for that you will pass the data so i'm going to say i'm going to pass a data which is called data for now dump yeah i know so let's use that right so here i'm going to pass a simple string for now what so here see i'm saying that i'm going to pass data now should it be called data no absolutely not it can be any name that you want it can be full name it can be channel name any any variable name you can give here any name you can give whichever you want to refer as input so i am saying channel name and i am passing a variable to app filter so now this is how you pass the input to app filter now since we are passing input it needs to be consumed let's do that part go to app filter users and here we are going to say that at the rate input i am saying i am expecting a input what is it channel name what is it type it's a type string so now look carefully here it imported input from angular core and i am saying that this component this component filter users will have an input by the name channel name what is the type it can be it is now string in this case it can be json it can be a you want to type cast it so you might want to have a model you want to define that that's also fine now once you receive this i want to display it we are inside filter with with channel name now see so it says property channel name does not exist let's see why okay because it is uppercase so make it small and the same i will pass it here which is channel name now you see we are inside filter name with name arc that name is passed from list users now let's change it so see now it got changed because the data is being now sent from list users to app filter that is the important thing that you should know now we can make it you don't have to hard code it right so what we will do i'm going to say cname i'm going to bind it using a variable and in this i'm going to say cname is equal to right so see so now whenever there is data change in the component data type level we are passing dynamic data channel name to the component app filters and in the app filter we are saying we are expecting an input by the name channel name now the question comes can i pass more than one what do you think can we pass more than one of course we can pass more than one how do we capture it same way right so now see now i'm going to tax now again this is uh the type of data you want to pass now let's close it here i'm going to squeeze them so that i can have okay so here let's pass tax equal to again tax well now define some value here equal to 200 so see now i am passing two inputs to this particular component one is channel name one is tax in the filter i'm saying i'm expecting channel name and tax right and same way let's bind it with tax as simple now see it says property tax does not exist so let's see why uh input is their tax it should be binded it is saying property tax does not exist we are inside okay let's see why was this saved okay so now it was not saved so you see now arc tutorials and this value are dynamically passed from parent which is list users to from list users to app filter users so that is the dynamic data that we are passing i hope this is clear now to you how do you pass data from parent child so that's the important thing we need to pass data from parent using bracket data attribute and you can give variable name that you want to pass it can be any name right it's not actually variable name so this is the directive right so i mean uh you're doing a kind of a binding here so it's kind of uh the name that you want as input right so i'll say input name here and same needs to be defined in the comp in the child component as input and say that you are going expecting that as an input right so okay so that was how do you pass from parent to child list uses parent app filter users is child you got the channel name and tags that you are passing as the input now i'm saying that once some operations are done app filter users will also give an output right so for that what we are going to say let's do that now we will use output active and we will say this particular component will give output what is the output i'm going to say updated list right for now i'm going to say string that's fine it doesn't matter now so i'm going to say it's going to give a string which is an output when is it going to give let's say i'm going to put a click event for now and i'm going to say that when i click on this it should update the value update users and update users so let's define this method and here we will say update users and we are going to say let's first we know that it will be called but still just for your sake i'm just putting that click clicked on update users okay so what are we doing we are putting a button in filter users component on click of it update users will be called and what is there in update users we are just doing a console log nothing more than that like this we have a button i will now do a simple console log here on click i click here and it says clicked on update users ideally now what i want is every time user clicks on this particular link or button i want to send the new data right so what is the new data so i'm going to say now see here i'm going to say this updated list is what is equal to new event emitter now i am saying it's a new event emitter right not from here it should be from the lc core event emitter okay so now we got the new event emitter and i'm going to say this i'm going to emit what is emit emit is nothing but you're going to send or you're going to relay the message since it's all being listened so here i'm going to emit and what i'm going to emit let's say new you have user object equal to some values you have it can be any json or any object right so it doesn't matter it can be a complex one for now i'm just showing you how to emit the data so see i'm calling once again take a look from start you have a button we click on it this method gets called and what is this method doing we have an object json object which is user object using updated list what is updated list it's an output that means i am saying that this will emit the data from child to parent by the name updated list which is a new event emitter okay now you can also type cast it and say that you know if you want of a certain type you can put that or i can put a void or any type you want now you have the event emitter now i'm saying this or whenever this method is called this dot updated list dot emit emit the new values what is the new value in this case it is the user object right now child is sending the data but parent is not yet receiving it so let's fix that so here now remember whatever data that you provide right it has to be of the same name so here you see now what is the value that you emitted see that that is important we are saying the output will be of the name updated list so copy that go to your list users paste exactly same name it should be same name because you will be getting the data there here i'll say updated list it can be any name updated users it it's a new method in the parent now which will capture that event so here i'm going to say event and updated users i'm going to put one here method and i'm going to say i'm expecting the data here console.log event let's see one more time and then i'll show you the output we have a button in filter users click on it you get to update users in updated users update users we are saying relay or emit the value which is updated list which is a new event emitter right it's an event so i'm saying updated list dot emit new value what is the value in this case it is user object it can be any value that you want there is no rule that it has to be of certain type but again in most realistic cases you would have some kind of a json object that you want to send okay so we are sending the user object to from child to parent now in the parent it's an event emitter that's why i've binded it as a event and what is the name it's the same name that you listed as output here in the child updated list now once you have it i'm saying whenever you get the data call a method in parent which is updated users and have that value here i'm implementing that method updated users now an event i'm just doing a console log now the confusion lot of time people will have is should it have same name no it can be any name you want there is no uh hard code rule that you should have the same name see now my child has a different name here which is update users in my parent i'm using users so it can be any name that you want as long as that's up to your business logic or application that you want to use important thing it's an event capture it here you will get the data now let's see that in action alrighty so let me clear everything so first when you click on it see when you click on it it comes to the child update users here it will create this object then it will emit the value using the output event emitter in the list in the parent i am capturing it using the updated list the same name that you used in the child as output and i am calling a method whenever i get this data which is users so here i have users and i am logging the event now you can always bind this data and show it in the ui so if i say user equal to empty object for now and i'm going to say this dot user is equal to event and in the ui i'm going to say h3 data received from child right so here i'm going to just say user and i'm not going to loop it i'm just going to use json so you see the output initially see it is empty there is no data now i click on it i get the data from the child back to parent that is how the input and output works in terms of angular communication i hope i have tried to make it easy and you are able to follow so give it a try this is the input and output this is the way angular components communicate right now can there be more than one image yeah it can be based on different events you can have different types of emits that you need to capture right this is the most important way that angular components communicate which is input and output so make sure that you try this out yourself let me know if you see any doubt i am always here to help you the next important thing is angular components communicate via services right now how do they do that let's quick let me quickly show you that also demo now we have a module by the name users it have two components so i'm going to throw in a new folder i'm going to say services right so here i'm going to step up one level that is i am at the app level and i am going to run the command ng generate service and i am going to say users so using the service the angular component communic angular components will communicate now let me show you you got the uh with okay we created it here so i'm going to delete this move to recycle instead i'm going to go to services and do the same so i will have the services generated inside the services okay so here you have user service so ideally what will happen is you would have something like this in the in this in the app module i'm going to inject this is how real time code would look mostly angular import just bear with me okay so now i have imported http client module in app module and i'm going to inject it right here in the imports array of app module and i'm going to go to service and i'm going to go to import and i am going to write http client from http ok so once you have it you will create an instance in the constructor you will inject it and write http client now you have it now let's say you want to implement a method which says get users and you will say this dot http dot get you will have a url like this your api this is your api endpoint or rest api endpoint that you will call to get the data and you will return etc right so this is how you will usually write a service so assume that i have done all of this and what i get is the output so let's call it users equal to i'm going to quickly throw in a username channel and some i'm just throwing in two values so that okay um and then i'm going to just just to make sure that we have right so we have three values now okay so this is a set of users that imagine that you will receive um as an output when you do this endpoint http call now let us just return this okay so once you return this now see i'm going to go to my users in the list users i'm going to go to here and import this service and now i can use that so here i'm going to say dot slash services dot slash dot dot slash services slash user service now see user service and this is what i need to inject it in my constructor create a instance and i can depending upon if i want to use it as a public i can make it public or private but for now i'll make it private ng on in it i'll write this dot users.getusers i get the users list in my list component console.log users or even better let me just throw it in the showed you in the u ui itself so i'm going to take this out and make it this dot users and here i'm going to say users is equal to or i can say now it says uh duplicate identifiers okay there's a method already okay so i'm going to say um list users and this dot list users okay so now in the html i'm going to put it here and i'm going to put one more html data received from service okay and here let's just put that value and i'll just loop it through json all right so see data received from service you see all these values that are coming from this service right because that's where we defined all these values in the service which is through method get users right so this is one way now the same method the same method can be shared in the other components so if i go to filter users i can use it again like this right so in the filter users again i can use it we need to inject in this component also okay and we are going to say this dot user service dot get users okay so console.log from filter users you get the idea that the same method in the service can be used in the filter also and you can see filter from users we get the three data all right so that was about we have a service we have a method that method can be used in different components so that they share the same data right that is the way angular components can communicate between each other using services right create a service using ng generate service service name and then implement one implement methods which can be which can be shared between components for sharing data all right so that is about angular component communication first service using services right now this these are the commonly things that are asked in every single angular interview that you will attend also on a day-to-day basis you will be doing these when you join in any angular project the last thing i want to cover for you is the angular component life cycle that will cover almost everything that angular component will include right so let's get started on that so the next one is angular component life cycle i'm putting a lot of effort i hope you like this video please do give a thumbs up please do like this video thank you in advance all right so what is a life cycle method right so angular component goes through a series of states um before it actually work right so that those are called life cycle hooks life cycle hooks right so what are the different types of like life cycle hooks that you have seen so the first one say it's on ng on changes so whenever there is some change in the component this will be called so if you see unknowingly we were using ng on in it that is also one of the life cycle hook right so how do you use them first to make sure you need to implement the interface here that is if you are using ng on in it you will have to use on in it here i will show you that in just a bit let me first give you all the life cycle hooks so that you can remember it first is ng on changes whenever there is change you will detect it ng on init which means whenever you lo whenever the component is loaded right ng do check then you have ng now inside this actually do check right now there are different things that will happen like ng after content in it that means once the data is completely rendered in the component once ng after content checked so there are different states like this but these are the main so i'll just quickly list it down uh i've covered that in the component life cycle please do check that out video for detail but these are the common ones i'll list down view in it then you will have ng i think it's after view checked yeah it is after content init after content view check so that's how you should remember after ng do check has two things ng after content ng after view so init and checked all right so the the next one is ng on destroy now this is when you want to exit the component right so these are the some of the frequently used ones i'll tell you ng on changes so listen to changes in data or like form or state or value change etc so this is very important um this is also something that you will use mostly often ngon in it is absolute stunner uh which means this will be used every i've used it like 70 percent of the times on most components that and every time a component is initialized loaded run this so it is on start of the component so you'll use this almost 80 to 90 percent times on initialization of the component right and then uh this uh this is also sometimes when if you want to wait uh you want to wait for content to be loaded to wait uh till content is initialized and checked that if it is loaded if the view is completely rendered you can use this and this is when you want to exit the component or whenever you navigate away from component you want to use ng on destroy what are some of the use cases i will give you some of the common ones that we use now whenever you do a subscription right let's say a lot lot of people tend to do this they make http call and write subscribe statements in ng on init right but one of the common mistakes also is that they don't do unsubscribe so whenever you write a subscribe http call in ng on in it make sure that you write a ng on destroy and you unsubscribe the subscription right so that's where ng on destroy will work this will help you in memory management so these are some other things let's see that in practical enough of theory but go through this i have created a separate list where i have explained all of this in detail but you should know about angular components in detail so i have covered the life cycles here for you now take example of this here we are writing ng on it so how do you work with life cycle let's say you want to implement ng on destroy right so you'll write on destroy right now it will give you error because you have not implemented it so get it here and say ng on destroy console.log and say component is destroyed so whenever you do navigate away from this component so you see we imported in on destroy from angular code just like on init and we are saying that this component implements these are the life cycle hooks which is on it on destroy and implement that here right so this is how you use the life cycle component life cycle hooks all right that was all i could think of to cover in angular components if you get this correct you should be able to answer at least 80 percent of the questions that are asked on angular components i'll give you two bonus tips right which is on component okay that is another thing that is often asked so i'll just list down that also for you right how many ways how many ways you can use component component template right this is yet another important question that is often asked i'll just show you that also so when you open the component file you'll see that there is something called template url which has the html right which has the html for this particular component but sometimes the you don't want to use this so i'm going to comment this here instead we can use something called template which means using backtick i am going to write the template right here cite the filter users now see i am not using html file anymore i am writing the html template right here so what are the use cases there are times like alert or um notification message or alerts or quick uh messages to user that hey it was um your your subscription is about to expire your trial is going to expire etcetera etcetera so if you have only one line of code which is your template so you can directly put it as a template also this is often asked in interview so i'm just giving you a example so see here inside the filter users now this is coming from your template the template is defined right here right now again you can use the subscription name just like the you can use interpolation everything just like how you would use normally in your html file now see here now this is one line is coming from this template so this is there are two ways of using template one is using template url and the other is using the template in the component itself okay that was number seven and the last point is uh can you include more than one css files in component every component um every component comes with one default css or scss depending upon what option you have chosen like in this case you see filter users component.scss the same is mentioned here now let me put it back and comment this for you so you see style urls right it says urls remember that read the difference template url that means there is only one url style urls that means it's an array it can take multiple style sheets like this custom style dot scs this is totally fine i'm passing more than one so if you have custom files you can say custom style dot sc ss and give some say i have a paragraph right so i'm going to custom and give it custom here and here you put custom and say color is red so see here red color because i have passed multiple style sheets to this right all right so so much information for you i hope um you will be able to practice all of this and master angular components there is nothing more than this to angular components it's as simple as this it cannot get any simpler it cannot get any easier than this i have tried to give you a real-time use cases also go through this list practice with me pause the video practice it yourself make sure that you're not getting any errors if you get any errors drop me comments i'm right here to help you i hope you like the video i hope you enjoyed watching me code if you like my work please do consider buying me a coffee at buy me a coffee.com slash ark tutorials in the next episode i will start with angular services in detail along with dependency injection calling http different methods statuses etc stay tuned for that if you like the video please do hit that like button please do subscribe to my channel to keep supporting me yeah see you in the next episode thank you so much

Channel: ARC Tutorials

Views: 5,570

Keywords: angular component interaction, angular component communication, angular component lifecycle hooks, angular component tutorial, angular component interaction using service, angular component module, Angular component tutorial, Angular 10 Tutorial, Angular 11 Tutorial, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced

Id: trxn1PIW0Fo

Length: 47min 16sec (2836 seconds)

Published: Sun Apr 18 2021