I am not able to route to another component in angular

Question

 <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

Rogelio Beristain · Accepted Answer · 2024-09-25 15:27:14Z

0

enter link description here

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

answered Sep 25, 2024 at 15:27

Rogelio Beristain

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

sigur Over a year ago

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.

dxxhsi97 · Accepted Answer · 2024-09-25 15:35:51Z

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']);
}

answered Sep 25, 2024 at 15:35

dxxhsi97

514 bronze badges

1 Comment

Dikshith Over a year ago

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?

Ali · Accepted Answer · 2024-09-25 15:50:36Z

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) {}

answered Sep 25, 2024 at 15:50

Ali

415 bronze badges

2 Comments

Dikshith Over a year ago

Tried the same thing still not able to route to desired page.

Dikshith Over a year ago

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 · Accepted Answer · 2024-11-28 10:38:04Z

0

There was an import for testing "RouterTestingModule"

This caused some issue in routing event After removing the above import, the routing worked as expected.

edited Nov 28, 2024 at 10:38

answered Nov 28, 2024 at 10:37

Dikshith

12 bronze badges

Collectives™ on Stack Overflow

I am not able to route to another component in angular

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related