0 
 <div class="mr-3 ml-3 mt-0 mb-4 leave_card_outer" *ngIf="leaveStatus !=null">
    <div class="row bg-white p-2">
      <div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue ;index as index">
        <a [routerLink]="['dstatus-fr']" class=""  (click)="setViewData(status.key)">
          <h3>{{ status.key | lowercase | translate | titlecase}}</h3>
          <p class="mt-3 mb-0 card_text"
            [ngClass]="getStatuskColor(status.key)">
            {{status.value}}</p>
        </a>
      </div>
    </div>
  </div>

This is my html file

setViewData(leaveStatus: string) { 
      console.log("fromdate",leaveStatus,this.fromDate_YYYY_MM_DD,"todate",this.toDate_YYYY_MM_DD);
    }

This is my ts file

 


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ChartboardFRComponent } from './chartboard-fr.component';
import { ViewstatusFrComponent } from './viewstatus-fr/viewstatus-fr.component';


const routes: Routes = [
  { path: "", component: ChartboardFRComponent },
  { path: "dstatus-fr", component: ViewstatusFrComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class ChartboardFRRoutingModule { }

and finally this is my routing file with respective routing details
we need to route to ViewstatusFrComponent on click of setviewdata

Improve this question

3 Answers 3

Reset to default
0

enter link description here

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

Improve this answer
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – sigur
    Commented Oct 4 at 7:44
0

I encountered a similar issue once while using both, the router link and a function triggered by click. Instead, I tried navigating to the specified route using the function triggered by click, in a way similar to this:

<div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue; index as index">
  <a (click)="setViewData(status.key)">
    <h3>{{ status.key | lowercase | translate | titlecase}}</h3>
    <p class="mt-3 mb-0 card_text" [ngClass]="getStatuskColor(status.key)">
      {{status.value}}
    </p>
  </a>
</div>

  setViewData(leaveStatus: string) { 
  console.log("fromdate", leaveStatus, this.fromDate_YYYY_MM_DD, "todate", this.toDate_YYYY_MM_DD);
  this.router.navigate(['dstatus-fr']);
}
Improve this answer
1
  • Tried the same thing still not able to route to desired page. constructor( private route: ActivatedRoute, private router: Router, ) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { console.log('Navigated to:', event.url); } }); } Tried getting url details but this gave nothing, "event.url" so does that mean instanceof NavigationEnd is empty? and what can be the reason for it?
    – Dikshith
    Commented Sep 25 at 18:42
0

You are using routerLink and also calling a click event with (click) they both can conflict. Better would be to handle the route navigation inside the setViewData(leaveStatus: string) function.

    <div class="mr-3 ml-3 mt-0 mb-4 leave_card_outer" *ngIf="leaveStatus != null">
  <div class="row bg-white p-2">
    <div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue; index as index">
      <a class="" (click)="setViewData(status.key)">
        <h3>{{ status.key | lowercase | translate | titlecase }}</h3>
        <p class="mt-3 mb-0 card_text" [ngClass]="getStatuskColor(status.key)">
          {{ status.value }}
        </p>
      </a>
    </div>
  </div>
your setviewData function could look like this. 
setViewData(leaveStatus: string) {
    console.log("fromdate", leaveStatus, this.fromDate_YYYY_MM_DD, "todate", this.toDate_YYYY_MM_DD);
    
    // Navigate to 'dstatus-fr' route and pass 'leaveStatus' if needed
    this.router.navigate(['dstatus-fr'], {
      queryParams: { status: leaveStatus }
    });
  }

finally dont forget to inject Router in the constructor

 constructor(private router: Router) {}
Improve this answer
2
  • Tried the same thing still not able to route to desired page.
    – Dikshith
    Commented Sep 25 at 18:30
  • Tried the same thing still not able to route to desired page. constructor( private route: ActivatedRoute, private router: Router, ) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { console.log('Navigated to:', event.url); } }); } Tried getting url details but this gave nothing, "event.url" so does that mean instanceof NavigationEnd is empty? and what can be the reason for it?
    – Dikshith
    Commented Sep 25 at 18:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.