-1

In the Angular application, there is a grid in which the first column is Name, and the routerLink value is decided based on the runtime API call and its return type. Shown below:

<tr *ngFor="let a of sliceList; trackBy: trackById">
      <td>
        <app-agency-state [Agency]="a"></app-agency-state><span>Name</span>
        <a [routerLink]="agencyLink(a)" style="cursor: pointer">{{a.name}}</a>
      </td>
</tr>

and in the agencyLink method, there is an HTTP call, and in its subscription, we will be returning the URL value. Seems logical but as we have hundreds of agencies and so during grid load, an HTTP call is getting triggered for all of the agencies and that puts browser in the hanged state. what could be the alternative solution to managing and deciding the RouteLink value dynamically after click?

Mayank Gupta
  • 45
  • 7
  • Here the scenario is that Agency could get expired after the campaign screen load.. so that's why we need to decide on which URL we want the user to redirect.. Expired URL or Main URL.. that's why we are looking for an option to decide the router link value after click, – Mayank Gupta Jan 19 '23 at 08:16

2 Answers2

0
<tr *ngFor="let a of sliceList; trackBy: trackById">
  <td>
    <app-agency-state [Agency]="a"></app-agency-state><span>Name</span>
    <a [routerLink]="agencyLink(a)" (click)="updateAgencyLink(a)" style="cursor: pointer">{{a.name}}</a>
  </td>

updateAgencyLink(agency: any) {
// make API call and update agencyLink value
this.agencyLink = this.apiService.getAgencyLink(agency.id).subscribe(
  res => {
    this.agencyLink = res.url;
  },
  err => {
    console.log(err);
  }
);
Ben Salem Ahmed
  • 1
  • 1
0

use navigationByUrl instead if routerLink

<a (click)="agencyLink(a)" style="cursor: pointer">{{a.name}}</a>

inject router in your component and in subscription result of method

this.router.navigateByUrl(result.url)

this can help

elias-heydarpour
  • 151
  • 1
  • 7
  • if we click the link with ctrl key pressed... It opens up the list in the current screen and opens the main screen in another tab... – Mayank Gupta Jan 19 '23 at 11:48