Angular - ng-template avec paramètre inside ngIf inside ngFor

Question

J'essaie de construire ce modèle:

<ul>
    <li *ngFor='let link of links'>
        <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
    </li>
</ul>

<ng-template #simpleLink>
    ...
    {{ link.some_property }}
</ng-template>

<ng-template #complexLink>
    ...
    {{ link.some_property }}
</ng-template>

Le problème est que la variable de lien n'est pas définie dans le ng-template, ce qui m'empêche d'obtenir une erreur d'accès à 'une_propriété' ou undefined.

J'ai du mal à comprendre comment je passe la variable link du ngFor au ng-template

Il serait bon de savoir s'il existe plusieurs solutions à ce problème.

Answer 1

Vous pouvez le faire comme:

<ul>
    <li *ngFor='let link of links'>
        <ng-container 
             [ngTemplateOutlet]="link.type == 'complex' ?complexLink : simpleLink" 
             [ngTemplateOutletContext]="{link:link}">
        </ng-container>
    </li>
</ul>

<ng-template #simpleLink let-link='link'>
    Simple : {{ link.name }}
</ng-template>

<ng-template #complexLink let-link='link'>
    Complex : {{ link.name }}
</ng-template>

WORKING DEMO