python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 Routing Navigation RouterModule

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 InformedAngular 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 }

  imports: [
    RouterModule.forRoot(appRoutes), // Installs Router routes, components and services
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 –

Example -
<div class='container'>   
    <div class='row'>

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 – 

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

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 –

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions