Angular - ng-template with parameter inside ngIf inside ngFor [duplicate]

Question

I am trying to build this template:

<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> 

The problem is that the link variable is undefined inside the ng-template so I get an error of accessing 'some_property' of undefined.

I am struggeling to understand how I pass the link variable from the ngFor to the ng-template

It would be great to know if there are multiple solutions for this problem.

Answer 1

You can do it like :

<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