Routing in Angular

Why do we use angular routing?

Lets say if you want to navigate to different pages in your application but you also want you application to be a single page application then we use angular routing.
That means even though you click on different links and the page loads without loading and refreshing of the page also the URL changes and the page is rendered.

Points to remember :

routerLink is an alternate to href on anchor tag which helps Angular nagivate without refreshing the whole page.
routerLink can also take array as an input for the case of multiple text seperated by [/]
<router-outlet> is a tag which is replaced with the component tag at run time i.e when you click on the a routerLink the corresponding component is fetched from the RouterModule mapping of URL and component and replaced at the place of router-outlet tag.
routerLinkActive is a style directive given by angular to show the selected routerlink
[routerLinkActiveOptions]=”{exact:true} is property binding which saying only turn routerLinkActive if exact URL is matched example “/” is part of all URL in this case we can use it.
We use routerLink to navigate from a UI(html) to another UI(html/component) but if we want to make a navigate programmatically via a typescript file then we need to
- Inject router class using constructor of that type script class
- Use the navigate method of router class to navigate to that page
- Example : this.router.navigate([‘/users’]);
ActivateRouter is a class that gives the current route in a Type Script class
We can pass dynamic parameter into routes using : before the name of path of route
Example : const appRoutes: Routes = [{ path: ‘users/:id’, component: UserComponent}];
We can read the dynamic parameters from the ActivatedRoute in TS file using
- Inject a ActivatedRoute using constructor.
- Read the dynamic parameter from the activated route using this.activatedRoute.snapshot.params[‘id’];
We can use Router Observables if you want change content of the same page asynchronously on some event performed/occured on the same page.

Example : In the below example we create a menu bar and corresponding pages to be displayed when the menu is clicked

We create a project in angular using angular cli and add three components into it.

ng new RouterDemo
ng g c home
ng g c reptiles
ng g c animals

We edit out app.module.ts file as per below :

import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BirdsComponent } from './birds/birds.component';
import { ReptilesComponent } from './reptiles/reptiles.component';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'birds', component: BirdsComponent},
  { path: 'reptiles', component: ReptilesComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    BirdsComponent,
    ReptilesComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

We edit the app.component.html file as below :

<div>

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/birds">Birds</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/reptiles">Reptiles</a>
    </li>
  </ul>

</div>
<router-outlet></router-outlet>

We edit home.component.html file as below :