Angular 5/4 Routers, Navigation (RouterLink and RouterOutlet) Menus, Component and Services Examples
In this article we’ve shown “How to navigate between the different routes in an Angular application?”
using the Routers and RouterLink
directives. Also explain “how to CREATE and use the Angular services?”
The Angular router is very easy to use, and below I’ll share some of the basics -
<!-- App Router Link -->
<a routerLink="/app-user"
routerLinkActive="active">Users</a>
<a routerLink="/app-bill"
routerLinkActive="active">Bills</a>
<!--
App Router Outlet -->
<router-outlet></router-outlet>
And
RouterModule.forRoot([
{
path:'app-user',
component:UserComponent
},
{
path:'app-bill',
component:BillComponent
}
])
Notice
here that we -
ü Use
path to specify the URL
ü We
specify the component we want to route to
ü Create
and use the services in the HTML by components
To install our router into our app we use the RouterModule.forRoot() function in the
imports key of our NgModule and the Application architecture looks like –
app.module.ts
-
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule } from
'@angular/core';
import
{RouterModule} from
'@angular/router';
import
{DateServiceService} from
'../app/date-service.service';
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ BillComponent } from
'./bill/bill.component';
import
{BillService} from
'../app/bill.service';
@NgModule({
declarations: [
AppComponent,
UserComponent,
BillComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path:'app-user',
component:UserComponent
},
{
path:'app-bill',
component:BillComponent
}
])
],
providers: [DateServiceService,
BillService],
bootstrap: [AppComponent]
})
export
class AppModule
{ }
app.component.ts
-
import
{ Component } from
'@angular/core';
import
{DateServiceService}
from '../app/date-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export
class AppComponent
{
title = 'Angular
App';
todayDate;
constructor(private
dateService : DateServiceService){
this.todayDate
= dateService.getTodayDate();
}
}
app.component.html
-
<div>
<h2>Today
Date - {{todayDate}}</h2>
</div>
<div>
<!-- App Router Link -->
<ul>
<li>
<a
routerLink="/app-user"
routerLinkActive="active">Users</a>
</li>
<li>
<a
routerLink="/app-bill"
routerLinkActive="active">Bills</a>
</li>
</ul>
<!-- App Router Outlet -->
<router-outlet></router-outlet>
</div>
user.component.ts
-
import
{ Component, OnInit
} from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export
class UserComponent
implements OnInit
{
users = [
{name: "Anil
Singh", qualification:
["B.Sc.",
"MCA", "MCTS",
"MCP"]},
{name: "Reena
Singh", qualification:
["B A", "M
A", "BTC"]}
];
constructor() { }
ngOnInit() {
}
}
user.component.html
-
<h2>Nested
loops</h2>
<table
*ngFor="let
user of users">
<tr>
<td>{{user.name}}</td>
<td>-</td>
</tr>
<tr *ngFor="let
qualifica of user.qualification">
<td></td>
<td>
{{ qualifica }} </td>
</tr>
</table>
bill.component.ts-
import
{ Component, OnInit
} from '@angular/core';
import
{BillService} from
'../bill.service';
@Component({
selector: 'app-bill',
templateUrl: './bill.component.html',
styleUrls: ['./bill.component.css']
})
export
class BillComponent
implements OnInit
{
//declare variable.
Bills;
//initialise constructor
constructor(private
bill:BillService)
{
this.Bills
= bill.getBillDetail();
}
ngOnInit() {
}
}
bill.component.html
–
<h2>
Bills -
</h2>
<div>
<table
*ngFor="let
bill of Bills">
<tr>
<td>BillID
- {{bill.billId}}</td> <td>
-</td>
</tr>
<tr>
<td>Bill
Name - {{bill.name}} - </td><td>Bill
Date - {{bill.date}}</td>
</tr>
<tr>
<td>Bill
Amount - {{bill.amount}}</td><td></td>
</tr>
</table>
</div>
After and before clicked on menu links the Result
looks like –
I hope you are enjoying with this post! Please share with you friends.
Thank you!!