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

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