python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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