Angular ng-template with dynamic parameter

ng-template allows you to store html that can be used dynamically in your project. It means if you have different view in a single loop you could achieve this using creating different ng-template view and show them conditionally.

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

Leave a Reply

Your email address will not be published. Required fields are marked *