Routing in Angular

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 :

<p>Welcome to the Zoo</p>

We edit birds.component.html file as below :

<p>Welcome to the Bird Sanctuary</p>

We edit reptiles.component.html file as below :

<p>Welcome to the world of reptiles</p>

And the output looks like below :

Leave a Comment