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() {
}
}