Angular 4 Routing and Navigation [Router Imports, Outlet, Link, State and Events]

What Is Angular Router? What’s New Angular 4 Router?

The Angular Router enables navigation from one view to the next as users perform application tasks.

Angular 4 comes with some useful changes in the router. Let’s take a look in the detail changes! Stayed Informed – Angular 4 Q/A

The Components of Routing and Navigation -

1. Router Imports

2. Router Configuration

3. Router Outlet

4. Router Link

5. Router State

6. Router Events

Angular Routing Overview -

1. Enter the URL in your address bar for your browser navigations.

2. Click on your navigations links on the page and the browser navigates to a new page which you have entered in the navigations URL.

3. Click the browsers back and forward buttons. The browser navigates backward and forward through the history of pages.

Router Imports- Angular Router is an optional service that presents a particular component view for a given URL i.e.

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

Router Configuration -

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'registration', component: RegistrationComponent},
  { path: 'login', component: LoginComponent},
  { path: ''home/:id',      component: HomeComponent, data: { title: 'Home' }},
  { path: 'users',    component: UserListComponent, data: { title: 'User List' }},
  { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' }}
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
    RouterModule.forRoot(appRoutes), // Installs Router routes, components and services
    FormsModule,
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

Router Outlet- It is a placeholder component and use to get expanded to each route's content.

Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive.

Syntax –

<router-outlet></router-outlet>

Example -

<div class='container'>   
    <div class='row'>
        <router-outlet></router-outlet>
    </div>
</div>

Router Link - It is use to link to application's routes and Router-link directive is used to link a specific part of your applications.

Syntax –

<router-link></router-link>

Example –

<ul class='nav navbar-nav'>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/login']">
            <span class='glyphicon glyphicon-Login'></span> Login
        </a>
    </li>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/registration']">
            <span class='glyphicon glyphicon-Register'></span> Register
        </a>
    </li>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/Users']">
            <span class='glyphicon glyphicon-Users'></span> Users
        </a>
    </li>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/Dashboard']">
            <span class='glyphicon glyphicon-Dashboard'></span> Dashboard
        </a>
    </li>
</ul>

Router State -

After the end of each successful navigation life-cycle, the router builds a tree of Activated-Route objects that make up the current state of the router. You can access the current Router-State from anywhere in the application using the Router service and the router-State property.

Each Activated-Route in the Router-State provides methods to traverse up and down the route tree to get information from parent, child and sibling routes.

Router Events -

1. NavigationStart- This event is triggered when navigation starts.

2. RoutesRecognized - This event is triggered when Router parses the URL and routes are recognized.

3. RouteConfigLoadStart- This event is triggered before the Router lazy loads a route configuration.

4. RouteConfigLoadEnd - This event is triggered after a route has been lazy loaded.

5. NavigationEnd - This event is triggered when navigation ends successfully!

6. NavigationCancel - This event is triggered when navigation is cancelled.

7. NavigationError - This event is triggered when navigation fails due to error.

References –

https://angular.io/guide/router

http://www.code-sample.com/2016/04/angular-2-route-config-example.html

https://angular.io/guide/ngmodule

https://www.youtube.com/watch?v=L6ipgij-AUw

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2