I am not able to route to another component in angular

<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

Continue reading...