Angular 4 Notes (Part 5) - Navigation using Angular Routing

Angular Routing allows navigation between different views.
Learn more on: https://angular.io/guide/router

Lets try this with an example.

1. Create another component inside components folder. I named it as phone.

2. Go to phone.component.html and change the html a bit.

<h2>

  Phone works!

</h2>

3. Go to app.module.ts and import router module

import { RouterModule, Routes } from '@angular/router';

4. Import router module inside imports

RouterModule.forRoot(appRoutes)

5. Create the routs in app.module.ts
Each route will have an object.

const appRoutes: Routes = [

  { path: '', component: UserComponent },

  { path: 'phone', component: PhoneComponent },

];

6. Change app.component.html and change its html to:

<router-outlet></router-outlet>

7. Save and go to your browser and type: http://localhost:4200/phone then it will show your phone component.

8. Show navigation links. Change the app.component.html to:

This will result:

Happy Navigation with Angular 4 !!!