Angular - Routing Basics

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to add routing to our Angular app.

Routing with Angular

We need routing to load components when we go to some URL.

To create an app with routing enabled, we run:

ng new routing-app --routing

The routes will be defined relative to the base path set as the value of the href value of the base tag.

First, we create some components that we want to map our URLs to.

To do that, we run:

ng generate component first
ng generate component second

In app.module.ts , we should have the AppRoutingModule :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent,
    SecondComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then in app-routing.module.ts , we should have:

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

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now we can define the routes.

To do that, we write:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then in app.coomponent.html , we write:

<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active">First
        Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active">Second
        Component</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

The routerLink attribute has the path to the route we want to access when we click the link.

routerLink active sets the variable for setting whether the link is active.

Getting Route Information

To get route data, we can call the this.route.queryParams.subscribe method to get the query string key-value pairs.

For example in, app.component.ts , we can write:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-example';
  constructor(
    private route: ActivatedRoute,
  ) { }

  name: string;

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.name = params['name'];
      console.log(this.name)
    });
  }
}

We inject the route dependency and then call the subscribe method in ngOnInit to watch query parameter changes when the component is loaded.

Then we get the query parameters from the params parameter.

When we go to http://localhost:4200/first-component?name=foo , we get the 'foo' from the name query parameter.

Wildcard Routes

We can define wildcard routes using the '**' string:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

So now if we go to any URL other than first-component or second-component , Angular loads the PageNotFoundComponent .

Conclusion

We can add routing with Angular with the routing module.