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 (Tutorial #20)  

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 : http://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 (Tutorial #1)  

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.