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 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..
|