angular 7 router navigate

Create a Menu Using Navigation Using RouterLink, Navigate or NavigateByUrl in Angular 7

In this example, I’m sharing to “How to create a menu using Angular 7 routing?  Using Navigation Using RouterLink, Navigate or NavigateByUrl.

Let’s see the example:-
App component page –
<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
      <li class="nav-item active">
          <a class="nav-link" href="/Calculator">Calculator</a>
        </li>
    <li class="nav-item active">
      <a class="nav-link" href="/holiday">Holiday</a>
    </li>
  </ul>
</nav>

<router-outlet></router-outlet>

App routing module page -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {CalComponent} from '../app/calculator/calculator.component';
import { HolidayComponent } from './holiday/holiday/holiday.component';

const routes: Routes = [
  { path: '', redirectTo: '/Calculator', pathMatch: 'full'},
  { path: 'Cal', component: CalComponent },
  { path: 'holiday', component: HolidayComponent }
];

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


Holiday component page -
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'holiday',
  templateUrl: './holiday.component.html',
  styleUrls: ['./holiday.component.css']
})
export class HolidayComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

 Calr component page -
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'Calr',
  templateUrl: './calr.component.html',
  styleUrls: ['./calr.component.css']
})
export class CalrComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Create a Menu Using Navigation Using RouterLink, Navigate or NavigateByUrl in Angular 7 Create a Menu Using Navigation Using RouterLink, Navigate or NavigateByUrl in Angular 7 Reviewed by Anil Singh on 3:35 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^