Angular 5 and 4 Router Navigation

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 {DateServiceServicefrom '../app/date-service.service';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { BillComponent } from './bill/bill.component';
import {BillServicefrom '../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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions