Routing - Angular (Tutorial #20)

Routing In angular application helps us to navigate across the components using client side navigation .
Kindly share this video : • Routing - Angular (Tut...
So far we have build component and we were displaying it in app.component.html but now we want to navigate from one component to another component when user click on any link .So as of now in my application I have created 3 component Users, about and contact .
And these components we can create using angular cli generate commands :
ng g c users
ng g c about
ng g c contact
But as of now if we want to call these components we will call it in app.component.html using custom tags .
We have created our layout using bootstrap navbar : getbootstrap.com/
Now instead of calling it like that we want to display particular component as per the client request .So we want to load users component here when the url is /users and about component will url is /about and same for contact component /contact
So this thing we can do using Routing in Angular . So the mapping of component with url will done through Routing and to implement routing ,we need to follow 3 steps:
1) Routes Configuration
2) router-outlet
3)Navigation to make is Single page application
Router Imports:
The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core. It is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package.
import { RouterModule, Routes } from '@angular/router';
Configuration
A routed Angular application has one singleton instance of the Router service. When the browser's URL changes, that router looks for a corresponding Route from which it can determine the component to display.
Router-outlet
When the url will change it will load our route but where to load the component it will decide by directive router-outlet. Router-outlet acts like a placeholder for the components
RouterLinks
Now you have routes configured and a place to render them, but how do you navigate? The URL could arrive directly from the browser address bar. But most of the time you navigate as a result of some user action such as the click of an anchor tag.
If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section
Subscribe to my channel : / nishasingla
Watch complete playlist here: • Introduction- Angular ...
Follow us on:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Website :
For more such interesting videos, please subscribe to our channel and stay connected.
If you face any problem how Routing works in Angular 5 then leave a comment below and let me know. I'll be happy to assist you.

[@lakshmikanth4249]

your explanation is so crisp.. I don't have to watch it twice to understand. Thank you.

[@NishaSingla]

Glad to hear this, thank you 🙏 keep learning 😃😃

[@lakshmikanth4249]

@@NishaSingla Please do videos on ReactJS as well.

[@asifsongs]

Best of the best explanation, what a wonderful instructor. No one on youtube can close her. She is simply the best. Thank u so much, Nisha.

[@indrasen9617]

you are simply awesome ......explained everything so simply like a boss

[@yuvaraj14598]

Thank you madam simple and easy explanation 💯% understand madam

[@NishaSingla]

You are welcome 😊

[@ranjithkumarm5687]

Great explanation. a Really wonderful job, and it's very easy to understand the concept the way you explain 👏👌💐

[@balajius4271]

Awesome Explanation and smart and clear pronounsataion Mam.. The main intension is to understand the word's. u only did it..Good English Nisha..

[@madhusatyam3074]

exllent explanation medam really good job

[@NishaSingla]

Thank you so much 🙂

[@syamveera6820]

Thank you Nisha, amazing teaching.

[@NishaSingla]

🙏🙏

[@thakurfitness7376]

Very good Nisha. Thank you. You teach me abut routing very easily..

[@abhi9074470124]

Super Explanation With Excellent Voice To Understand Kindly Upload Also Small And Big Project Of Angular

[@NishaSingla]

Hey Thanks :)

[@joshibabu2005]

Where are these days? Excellent videos nisha

[@Ramkirat1991]

@ Nisha Singla where are you ? please upload more video on angular 5, you are simply awesome.

[@kushaalrana]

Explain on point Thank you for this wonderful video👌

[@NishaSingla]

Good to know 😃

[@parvezmd6455]

madam, Do you have angular course on udemy,other platform

[@rakeshjoshi2306]

Thanks for this video. It really helped to understand angular routing. Please create a video related to UI-route third-party module vs angular 5 routing difference.

[@kotireddy6467]

Hi Nisha , good teaching for all angular videos .. I have one dout..how can I navigate one page to onther page please help me

[@vedhalokanadham9254]

awesome explanation

[@sourabhpandit6724]

Superb Excellent

[@sarkari-mahiti]

thank you so much 😊

[@donaldli1864]

Beautiful face, sweet voice and clear explanation.

[@NishaSingla]

thank you!

[@saalimhussain6635]

I have doubt How to route from login page to other page . For me it's showing below the login page . Where should I use router outlet for that If I click submit button , it should route to the other component , without showing the login page

[@NishaSingla]

Router outlet you need to keep in the layout component where you are expecting to render component based on route change

[@saalimhussain6635]

@@NishaSingla thanks

[@rahulsingh-px6vo]

This is basic routing part continuing from Angulat 2, the main upgrades came to Angular5 are ActivationStart, ActivationEnd, ChildActivationStart, and ChildActivationEnd. Hope you will update soon.

[@venkateshyadla9798]

thank you nisha

[@NishaSingla]

You’re welcome

[@aqibferoz8576]

u r doing a great job

[@jprit1360]

I like your videos

[@prathyubommana7453]

thank you

[@Sandeep-lb7wb]

Nisha can I expect videos on all router events and lifecycle hooks

[@NishaSingla]

Sure Sandeep. Will try to upload soon

[@mohammadakramkhan9326]

Hi, Nisha ji i put bootstrap slider ,slick slider and other plugin expect the home page other page this plugin is not working on routing page so for what reason this not working. can you explain ?

[@Harshaavolgos]

Hi mam....can you please upload the vedio about the pagination concept ?

[@shamsapkale6469]

Really good jobs..!!

[@NishaSingla]

Thank you

[@nari1874]

Good explain madam..

[@NishaSingla]

Thank you

[@narasimhareddy5713]

Hi i am getting problem that is not able to display the users details i am getting only users on browser in users navigation and users.component.html why we use users.length>0 else nousers

[@shamsapkale6469]

Hi ,Nisha Ji If You possible , plz upload lazy loading in angular 4 with Router Guards

[@NishaSingla]

I will try to do so... thank you

[@jprit1360]

Please make one website that will contain all these property of angular5 mam

[@shashankpandey1966]

#subscribed... thankyou so much.

[@NishaSingla]

Thank you Shashank

[@akshayshihora5851]

all are angular serious is very good explain and i hope update new video for angular 5 and angular 6

[@NishaSingla]

Thank you

[@ginny_ki_gang9964]

HI I have one question, when I am using router link my jquery is not working

[@jprit1360]

Is this complete tutorial of angular5 mam

[@angulardesign7412]

how to make landing page and (home after login) url same like localhost:8080 like facebook does facebooklogin page url facebook.com and profile url same facebook .com in angular plz help i m working on real project

[@shaheennajma4253]

HI, does anyone have source code for the following code?

[@MANDEEPSINGH-kg9fe]

mam where is code of this video.plz share that also

[@jayakumar2927]

Login logout how to add here right side

[@drajay8671]

I love u

[@codewithsingh7710]

Routing is different in angular 7/8

[@shashankpandey1966]

No routing is same.

[@jayakumar2927]

Routing error comes how to resolve share the code

[@NishaSingla]

I don’t have code with me as my system crashed n lost earlier data... what issue u r getting ?