Angular routing, A Complete Guide To Routing In Angular

Angular Routing is a default feature of the application. In this tutorial we will learn about Angular routing.

Introducing Angular Router

Angular Router is a powerful JavaScript router built and maintained by the Angular core team that can be installed from the @angular/router package. It provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access.

The Angular router is a core part of the Angular platform. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.

Step 1 – Create Routing File

Our first setup is to create routing file named “app-routing.module.ts”, where you will put all your route.

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

const routes: Routes = [];

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

Step 2 – Import routing module

Next, We will import above created file in the ‘app.module.ts’ file

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

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

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

Step 3 – Create two components

Now we will create two component. One component for one route. run below command to create components

ng g component firstPage
ng g component secondPage

Step 4 – Create route and attach the component

Next, We will create two route and attach component on it. So when user navigate the route he / she will see the separate component. Open “app-routing.module.ts” file.

Import our components

import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';

Next, Create route like this

const routes: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: 'second-page',
        component: SecondPageComponent
    }
];

After update our file will look like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';

const routes: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: 'second-page',
        component: SecondPageComponent
    }
];

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

Step 5 – Add router-outlet

Now, we need the above component to be displayed whenever required or clicked from the main module. For this, we need to add the router details in the app.component.html.

<br/>

<a routerLink = "first-page">First Page</a> | 
<a routerLink = "second-page">Second Page</a>

<br />
<br/>
<router-outlet></router-outlet>

In the above code, we have created the anchor link tag and given routerLink as “first-page” and “second-page” . This is referred in app-routing.module.ts as the path.

When a user clicks on  “first-page” or “second-page” , the page should display the content. For this, we need the following tag – <router-outlet> </router-outlet>.

The above tag ensures that the content in the first-page.component.html or second-page.component.html will be displayed on the page when a user clicks on  “first-page” or “second-page”

Let see how the output is displayed on the browser.