Angular 10 Tutorial #36 - Router Outlet in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about router outlet what is router outlet why is it important why is it extremely important in angular applications to have a router outlet what role does it play and why is it what are the different variations of router outlet that we can use we are going to learn all about it in today's episode this is part 36 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this series the previous videos links are in the description box below as we do in every episode i'll make some notes which will help you in learning so those notes can also be found in the github link that i have uploaded there so make sure that you check out the description box so for all the details all right so these are the topics that i have already covered in detail along with notes and clear explanation make sure that you check out if you really want to learn and master angular 10. also if you have any doubts on any of these topics that i am covering please do let me know in the comments section i will try and help you as much as i can thank you so much in advance and let's get started with router outlet so router outlet is a directive that's available from the router library where the router inserts the component data that gets matched based on the current browser's url right so take a moment to read it and break it down it's a big sentence so router outlet is a built-in direct right it's available in angular application framework now it's a route right so whenever we have the routes that match exactly with the component it will take the output of the component and insert it into the browser right into the dom basically we can have multiple outlets in the angular application right which enables us to implement advanced routing scenarios i will show you this also little later so the idea here is you should have at least one router outlet right one is mandatory one is compulsory you can have more than one absolutely but at least one right you can have more than one also by default the router outlet is defined in your app.component.html file right so that's all theoretical thing that you should know about router outlet right so let's jump into the code and maybe i'll explain you a little bit more there so this is episode number 36 yep so here we are learning about router outlet do check out the previous uh notes that we made of other tutorials as well all right so router outlet is a built-in director right built-in directive right at least every angular application should have at least one router outlet right by default by default the router outlet is defined in app.component.html file right so just open app component and at the last line you would see this right it's an empty directive because i'll tell you why so there is a router outlet which is defined right now what it does right so router outlet will match the routes will match the matching routes for the components right and take its data take its output and insert inside the router outlet tag outlet tag right so now let's see this in real time application so if you have a routing file here right we added this path in the last episode so make sure that you check out the previous episode if you missed it so here we are saying whenever your path is loans load this component the output of this component will be loaded inside the router outlet right let me first show you that in action ng serve so i'm starting my application let's give it a minute in the meanwhile if you are enjoying this tutorial please do hit the like button if you have any questions queries drop them in the comment section also please don't forget to subscribe to my channel thank you in advance so we are almost there it's 93 percent done so compile successfully let's open our browser and you see here we go to loans it says loans work because that's the path we define now if i say add it will say add loans works right which means it's matching this path finding this component taking its data and putting it inside the router outlet right so let's see if i put a heading here right this is angular application so see this will be common to all the views right let's see here this is angular application now you go to loans so this is still the same right because that template is same what changes is only this data because this data is getting loaded inside router outlet right so now you know that whenever we create any routes it will find this component and it will come and take the output of this component and put it inside the router outlet right so right click on this and inspect and you would see that it app loans is inserted here you see router outlet it will come and find the app loans and put it here right so basically it's injecting right it's injecting the router outlet now that's the output maybe you can think of it that way now you see again expanded now you see router outlet is here it has found the matching route extracted the content and injected in the dom so that's why you see app add loads here right so that is what the matching does oh not inside the router outlet tag inside the top or it's a single page application right so i'll just say inside the page right all right so that was about the router outlet now what happens when it doesn't match so ideally that will go into a wild card or something right so by default it will bring you to homepage that will see in the next coming episodes for now all you should know is there has to be one router outlet in the angular application now what happens if you don't have it just delete it right let's see what happens do you expect any output no so now you do not have anything it is matching but it does not have any outlet to display that output so that is why you will not see anything it's not an error it's not an error but you don't see the output so put it back refresh and go here now you will see this back right so one last thing before router outlet you can have multiple router outlets in application right so i told you that we need at least one that's the keyword see i didn't say we can have only one i said we should have at least one right now you can have more than one right we can have more than one then one router outlet okay now by default angular thinks the the one that is there by default angular will think that's the primary one if it doesn't have any right so that's the first one right by default it is called the primary router outlet that's all you can think of it primary router outlet okay that's all you should know about route around outlet and that's the important part of it because a lot of people what they do they just delete this right this is one of the common mistakes right so what is the common mistakes when mistakes is your code is right everything is correct you don't have router outlet so once you don't have it you won't see the output it you won't see the output so that's why don't miss that router outlet now the other thing people try to do is put something inside it right put some some output inside router outlet this is yet another common mistakes i have seen which is now see if i put it here and i'll say this is router outlet right so what they do this is correct if you want to display it let's say for example if this will be displayed for all the things right so never put it something inside router outlet right instead what you do if you want something you can wrap it around right so always try and have this empty and instead squeeze it somewhere here with the if condition or something else like this right so this way you can better handle it just leave the router outlet as it is don't emp don't pollute it basically right so that's a good practice don't pollute router outlet that's what i can tell you right it's not an error it's not an error right so this is not an error but i would say good practice right so avoid putting so like i said it's not an error best practice is to leave router outlet empty okay just leave it it has to be there it's there it will do its job because it that's how it will process the routes you don't pollute it right all right so that being said uh that's all i have to cover about router outlet today because in the next episode i will cover about using and implementing multiple router outlets right i told you we can have more than one router outlet i'll cover that in the next episode so stay tuned for that if you like my work if you like my tutorials please do consider buying me a coffee at buy me a coffee dot com slash ark tutorials thank you so much join me in the next episode where we will take this example build multiple router outlets in our application thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 7,593

Keywords: Angular 10 tutorial for beginners, 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, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Router Outlet in Angular

Id: sWjrfV4m4Bc

Length: 10min 34sec (634 seconds)

Published: Sat Nov 28 2020