Routing in Angular

Routing in Angular

Routing in Angular enables users of your application to navigate from one view of the app to the other. 

Create an App with Routing enabled

ng new first-routing-app  --routing

--routing enables the routing in the app. The above command will ask you the type of stylesheet format you want to use. For this project choose CSS or press enter, it will select CSS by default. 

Add components for Routing

Your app should have more than one component to navigate from one to the other. we will create a contact us component and about us component so that we can demo the process of routing in the app.

Create the components using the Angular CLI commands: 

Create "contactus" and "aboutus" components.

ng generate component contactus  

ng generate component aboutus

Use the components in the Routing:

To use contactus and aboutus components, you have to import them into the "app-routing.module.ts" file.

app-routing.module.ts

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

import {AboutusComponent} from './aboutus/aboutus.component'
import {ContactusComponent} from './contactus/contactus.component'

const routes: Routes = [];  // here you define your routes

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

}

The above code is completely created by Angular CLI, we have to define our routes in the routes array which Angular provides us.

Next step is to import AppRoutingModule into the AppModule and add it to the imports array. Fortunately, Angular CLI does this step for you.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';

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

Add routes in the AppRoutingModule in the app-routing.module.ts

const routes: Routes = [

  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent }


];

Code for your reference:

app-routing.module.ts

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

import { AboutusComponent } from './aboutus/aboutus.component'
import { ContactusComponent } from './contactus/contactus.component'


const routes: Routes = [

  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent }


];

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

Add these routes to the view of the root component:

app.component.html:

<h1>Angular Router App</h1>

<nav>
  <ul>
    <li><a routerLink="/aboutus" routerLinkActive="active">About US</a></li>
    <li><a routerLink="/contactus" routerLinkActive="active">Contact Us</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

router-outlet renders your route views dynamically.

Click on the links and see the URL in the browser that changes when you click any of the router links, Angular Routing changes the view dynamically without refreshing the page.