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="/APRCalculator">APR 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 {CalculatorComponent} from '../app/calculator/calculator.component';
import { HolidayComponent } from './holiday/holiday/holiday.component';

const routes: Routes = [
  { path: '', redirectTo: '/APRCalculator', pathMatch: 'full'},
  { path: 'APRCalculator', component: CalculatorComponent },
  { 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() {
  }

}

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

@Component({
  selector: 'APRCalculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent 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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^