Dynamic routerLink value for ngFor item Angular 8

Question

I am trying to route the dynamic value from the NgFor using [routerLink].

<li class="list-group-item d-flex justify-content-between align-items-center"
            *ngFor="let factors of factorsList">
            <span>{{factors | titlecase}}</span>
            <a [routerLink]="'../factors'" class="btn btn-primary btn-sm">Reset <span class="sr-only">{{factors}}</span></a>
        </li>

The code should generate the equivalent code as below

<li class="list-group-item d-flex justify-content-between align-items-center">
            Google
            <a [routerLink]="['../google']" class="btn btn-primary btn-sm">Reset <span class="sr-only">google</span></a>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            YubiKey
            <a [routerLink]="['../yubikey']" class="btn btn-primary btn-sm">Reset <span class="sr-only">yubi
                    key</span></a>
        </li>
<li class="list-group-item d-flex justify-content-between align-items-center">
            Backup codes
            <a [routerLink]="['../backupcode']" class="btn btn-primary btn-sm">Reset</a>
        </li>

But for some reasons, the value factors are not replaced in [routerLink]="'../factors'"

Component Class

export class MfaResetComponent implements OnInit {
  mfaApp = MfaApp
  public factorsList: string[] = [];
  constructor(private genericHttpClientService: GenericHttpClientService) { }

  ngOnInit() {
    this.getResetFactors();
  }
  getResetFactors() {
    this.genericHttpClientService.GenericHttpGet<FactorsViewModel[]>(`url`).subscribe(item => {
      this.factorsList = [...new Set(item.filter(factor => factor.status == MultiFactorAuthenticationEnrolmentStatus.Enrolled).map(factor => factor.provider))];
    })
  }
}

The list factor will be

this.factorsList = ['Google','okta','Yubikey','BackupCode']

Some of the question I found I stack overflow Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

Angular 2 dynamically set routerLink using a component property

replace `[routerLink]="'../factors'"` with `[routerLink]="'../'+factors"` — Vikram Singh, Nov 13 '19 at 06:06

Adrita Sharma · Accepted Answer · 2019-11-13T06:11:00.123

3

Try using [routerLink]="'../'+factors" or routerLink="{{'../'+factors}}"

Working Demo

.ts

factorsList = ["about","services"]

.html

<li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let factors of factorsList">
    <span>{{factors | titlecase}}</span>
    <a [routerLink]="'../'+factors" class="btn btn-primary btn-sm">Reset <span class="sr-only">{{factors}}</span></a>
</li>

edited Nov 13 '19 at 06:11

answered Nov 13 '19 at 06:08

Adrita Sharma

21,581
10
69
79

I can't use [routerLink]="factors" since I need to navigate to the relative route. So I need to make use of [routerLink]="../factors". – San Jaisy Nov 13 '19 at 06:10
Check the modified one – Adrita Sharma Nov 13 '19 at 06:11

score 1 · Answer 2 · answered Nov 13 '19 at 06:09

1

You are using string in [routerLink]="'../factors'" to make it work

replace [routerLink]="'../factors'" with [routerLink]="['../'+factors]"

answered Nov 13 '19 at 06:09

Vikram Singh

924
1
9
23

Dynamic routerLink value for ngFor item Angular 8

2 Answers2