<code> <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>
</code>
<code> <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>
</code>
<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
<code>setViewData(leaveStatus: string) {
console.log("fromdate",leaveStatus,this.fromDate_YYYY_MM_DD,"todate",this.toDate_YYYY_MM_DD);
}
</code>
<code>setViewData(leaveStatus: string) {
console.log("fromdate",leaveStatus,this.fromDate_YYYY_MM_DD,"todate",this.toDate_YYYY_MM_DD);
}
</code>
setViewData(leaveStatus: string) {
console.log("fromdate",leaveStatus,this.fromDate_YYYY_MM_DD,"todate",this.toDate_YYYY_MM_DD);
}
This is my ts file
<code>
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 { }
</code>
<code>
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 { }
</code>
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
enter link description here
<code><a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a></code>
<code><a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a></code>
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a>
New contributor
Rogelio Beristain is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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:
<code><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>
</code>
<code><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>
</code>
<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>
<code> setViewData(leaveStatus: string) {
console.log("fromdate", leaveStatus, this.fromDate_YYYY_MM_DD, "todate", this.toDate_YYYY_MM_DD);
this.router.navigate(['dstatus-fr']);
}
</code>
<code> setViewData(leaveStatus: string) {
console.log("fromdate", leaveStatus, this.fromDate_YYYY_MM_DD, "todate", this.toDate_YYYY_MM_DD);
this.router.navigate(['dstatus-fr']);
}
</code>
setViewData(leaveStatus: string) {
console.log("fromdate", leaveStatus, this.fromDate_YYYY_MM_DD, "todate", this.toDate_YYYY_MM_DD);
this.router.navigate(['dstatus-fr']);
}
New contributor
dxxhsi97 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
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.
<code> <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>
</code>
<code> <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>
</code>
<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.
<code>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 }
});
}
</code>
<code>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 }
});
}
</code>
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
<code> constructor(private router: Router) {}
</code>
<code> constructor(private router: Router) {}
</code>
constructor(private router: Router) {}
2