Variabilizing the # from

Question

I'm currently trying to generate a dynamic menu from a JSON blob in my typescript files, Angular project.

I'm using the / component from Angular Material.

My json menu has this structure :

{
        id: 0,
        titreTranslate: 'menu-accueil',
        isDescriptionRequired: true,
        routerLink: '/accueil',
        icon: faHome,
        isAllowed: true,
        hasSubOptions: false,
        trigger: 'accueil'
}

My code look something like this :

<mat-toolbar-row class="navigation-row">
    <span *ngFor="let option of menuOptions">
        <button mat-button
                [matMenuTriggerFor]="admin"
                routerLink="{{option.routerLink}}"
                (keyup.enter)="router.navigate([option.routerLink], { queryParams: option.queryParams })"
                [routerLinkActive]="['active-menu']"
                [queryParams]="option.queryParams"
                class="link bouton-menu-gauche flex-row"
                *ngIf="option.isAllowed"
        >
          <fa-icon
            *ngIf="option.icon"
            class="primary-color"
            [icon]="option.icon"></fa-icon>
            {{ option.titreTranslate | translate }}
        </button>
      <mat-menu #{{option.trigger}}="matMenu">
        <span *ngFor="let subOption of option.menuOptions">
          <button mat-menu-item
            *ngIf="option.menuOptions"
            routerLink="{{subOption.routerLink}}"
            (keyup.enter)="router.navigate([subOption.routerLink], { queryParams: subOption.queryParams })"
            [routerLinkActive]="['active-menu']"
            [queryParams]="subOption.queryParams"
            class="link bouton-menu-gauche flex-row">
            <fa-icon
              *ngIf="subOption.icon"
              class="primary-color"
              [icon]="subOption.icon"></fa-icon>
              {{ subOption.titreTranslate | translate }}
          </button>
        </span>
      </mat-menu>
    </span>
  </mat-toolbar-row>

The line with " <mat-menu #{{option.trigger}}="matMenu"> " is what concerns me here ; I've tried many ways to variabilize this #, such as putting it directly in the Json menu or trying different syntax ; It always fail, and won't give me the code structure i want.

If i had to guess, i'd say the generated code should look like : <mat-menu #"accueil"="matMenu">, with "" that fail to compile ; but i don't get any compilation errors, so i'm lost here.

Does anybody had to work with that kind of structure before ?

(apologies for my english if it's bad, i'm french)

As you use a template variable reference under a ngFor, Angular maintain the "scope". you can use without problem `..` — Eliseo, Sep 21 '22 at 13:09

score 0 · Answer 1 · answered Sep 22 '22 at 16:47

Check out this answer: https://stackoverflow.com/a/44441164/2025458

It's easier to search for the answer if you call things by the name they are given in the documentation, the '#' is a template reference or template variable

And since it's inside a structural directive (*ngfor or any other directive strating with *)

It binds to a template created by the structural directive, so every loop of the ngfor generates its own nested template with its own instance of the variable, so you can just use one name

Variabilizing the # from

1 Answers1