CODEWITHSUNDEEP
angulartypescript
Mr. Learner
Mr. Learner

Reputation: 1038

Angular 6 - Reusable component - Route navigation

Currently, am rendering exactly the same table structure which is in a shared folder, for three different components. The issue, I'm having back button on the table, whenever I click on that it should navigate back to the component view from its actually came from.

Assumption:

componentA -> commonTblCompoent - click Back - go to componentA 
componentB -> commonTblCompoent - click Back - go to componentB 
componentC -> commonTblCompoent - click Back - go to componentC

Right now navigation is only happening to componentA. How to change route config smartly.

compoentA.ts

gotoCommonTbl {
    this.router.navigate(['cmnTable/commonTbl']);
}

compoentB.ts

gotoCommonTbl {
    this.router.navigate(['cmnTable/commonTbl']);
}

commonTbl.ts

gotocurrentComponent() {
//this.router.navigate(['componentA/comp-A']);

// this is supposed to be changed for proper navigation
}

Could someone tell me how to rewrite and fix this issue? if possible, kindly share any sample working demo

Thanks all

Upvotes: 1

Views: 277

Answers (1)

UncleDave
UncleDave

Reputation: 7188

You could consider using the Location class in CommonTbl and sending the user back where they came from:

import { Location } from '@angular/common';

constructor(private location: Location) { }

gotocurrentComponent() {
  this.location.back();
}

https://stackblitz.com/edit/angular-yajvoj

Upvotes: 1

Related Questions