Chandradev's Blog

Routing is one of the core concept to create the single page application using angular framework. Routing help us to navigate the one page to other page without making the post back.

In this post we will see, how to implement the simple routing functionality using angular 5.

Step 1: Create the angular project using visual code
ng new my-Sample

Step 2: Create the angular component for Home,About,Contact us like this
ng g c home
ng g c about
ng g c contact

Step 3: Now go to the angular application, You will get Home, About and contact component in App folder
In home.component.html file change the code like

      <div class="container">
      <h2>Home  page</h2>
   </div>
 

Step 4: Change the code for about and contact page.
Step 5: Go to the root folder of style.css file and add the class for container and Menu like this

.container
{
  border: 1px solid #AAA;
  padding: 30px;
}
h2,h3
{
    color: #555;
    font-family: sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
 

Step 6: Go to the app.module.ts file add the routing related code like this

Note: in above code we using the routing functionalig of angular so we are importing
import {RouterModule,Routes} from ‘@angular/router’

This is the syntax making rout in angular. It will tell which component should be invoked on click of Menu item.

Below two line of code is used for making default rout to Home component if the user will type blank or some other char in URL.

const appRoutes:Routes=[
  {path:'home',component:HomeComponent},
  {path:'about',component:AboutComponent},
  {path:'contact',component:ContactComponent},

  {path:'', redirectTo:'/home',pathMatch:'full' },
  {path:'**' ,redirectTo:'/home',pathMatch:'full'} 
]; 

Complete code is as given below

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes:Routes=[
  {path:'home',component:HomeComponent},
  {path:'about',component:AboutComponent},
  {path:'contact',component:ContactComponent},
  {path:'', redirectTo:'/home',pathMatch:'full' },
  
  {path:'**' ,redirectTo:'/home',pathMatch:'full'} 
];

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

Step 7: Go to the app.component.html file and give the place holder for menu and html page as given below

<ul>
  <li>
    <a routerLink="/home">Home</a>
  </li>
   <li>
    <a routerLink="/about">About</a>
  </li>
   <li>
    <a routerLink="/user/list">User</a>
  </li>
</ul>
<router-outlet> </router-outlet>

Note : is placeholder for rendering the html page on click event of menu items.