Routing - Angular (Tutorial #20)

Routing In angular application helps us to navigate across the components using client side navigation .

And these components we can create using angular cli generate commands :
ng g c users
ng g c about
ng g c contact

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.

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

Follow us on:

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.

[lakshmikanth]

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

[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.

[indrasen]

you are simply awesome everything so simply like a boss

[ranjithkumarm]

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

[balajius]

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

[madhusatyam]

exllent explanation medam really good job

[yuvaraj]

Thank you madam simple and easy explanation 💯% understand madam

[thakurfitness]

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

[kushaalrana]

Explain on point Thank you for this wonderful video👌

[Ramkirat]

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

[joshibabu]

Where are these days? Excellent videos nisha

[abhi]

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

[mohammadakramkhan]

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 ?

[rakeshjoshi]

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.

[narasimhareddy]

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

[rahulsingh-pxvo]

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.

[donaldli]

Beautiful face, sweet voice and clear explanation.

[ginny_ki_gang]

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

[saalimhussain]

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

[jayakumar]

Login logout how to add here right side