Angular 6 router example

How to add router to Angular application and use it from the HTML templates but also from services? Let's take a look.

First let's import Angular router. Go to app.module.ts and add these lines:

import { AppRoutingModule} from './app-routing.module';

...

imports: [
    ....
    AppRoutingModule,
    ...

....

providers: [AppRoutingModule,...]

Now let's create routing module, crate app-routing.module.ts and paste these lines there:

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

import {LoginComponent} from "./components/login/login.component";
import {HomeComponent} from "./components/home/home.component";
import {DashboardComponent} from "./components/dashboard/dashboard.component";
import {UserProfileComponent} from "./components/user-profile/user-profile.component";

 
const appRoutes: Routes = [

	{ path: '', component: HomeComponent},
        { path: 'login', component: LoginComponent},
	{ path: 'dashboard', component: DashboardComponent},
	{ path: 'profile', component: UserProfileComponent}

];


@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

export const routingComponents = [LoginComponent,HomeComponent,DashboardComponent,UserProfileComponent];

So as you can see we are importing all components ( LoginComponent,HomeComponent,DashboardComponent,UserProfileComponent ) that are going to render html data for every route. Doing it like this we do not have to import every component to app.module.ts. So let's go back and add this routing module to app.module imports

import { AppRoutingModule,routingComponents} from './app-routing.module';

so now when we have it set and done, lets use it our navigation inside of HTML. To redirect a user to a different route insert this attribute on your link:

routerLink="/profile"

and this will send user to profile url and render UserProfileComponent.
How is this done?
well in you HTML template layout you have to add this element where you want your data to be rendered for each route/componet

<router-outlet ></router-outlet>

And there is one more thing, if you want to add a specific class to mark link as active, add this next to your routerLink:

routerLink="/profile"
routerLinkActive='activeLink'

create activeLink class inside of styles.css and it will be applied when link is active.
Sometime you will notice that home button is always mark as active even though if we are not on that route. How is that possible? This happens when home route look like this:

routerLink="/"
routerLinkActive='activeLink'

so the router will say any route that contains "/" will be also marked as active home route (WTF?), but there is a fix for this. We have to tell router that home route is only "/" this, and nothing else. To make it done we have to add this line to our link:

[routerLinkActiveOptions]="{exact:true}

so the complete link button will look like this:

      <button
        type="button" 
        class="fade5"
        aria-label="Home"
        routerLink="/"
        routerLinkActive='activeLink' [routerLinkActiveOptions]="{exact:true}"
        >Home
      </button>

So, how to redirect to a route in Angular 6 from a service or manually from other parts of application?
If we want to use it in a service we have to do it like this:

import { Router } from '@angular/router'; // import it 
...

  constructor( private router: Router ) { }  // add it to constructor

...

// and then you can use it in a function (for example) to redirect to specific route:
redirectHome(){
      
    this.router.navigate(['/']);

 }

And that's all folks!

Thank you
and thank me

have a nice day fooker :)

Angular 6 router example

Angular 6

Angular 2