Dynamic template outlet Angular

Question

I am trying to make a dynamic ngTempateOutlet.
I tried as follows:

<ng-container *ngFor="let action of actions">
    <ng-container *ngTemplateOutlet="action"; context="{item}"></ng-container>
</ng-container>
<ng-template #DELETE let-item="item">delete</ng-template>
<ng-template #MODIFY let-item="item">modify</ng-template>

Where actions is ["DELETE", "MODIFY"].

It seems that action inside the *ngFor doesn't result in DELETE and MODIFY, because if I manually insert the values the templates are displayed, otherwise they aren't.

I would avoid doing manual checking in order to keep it dynamic (es:)

<ng-container *ngFor="let action of actions">
    <ng-container *ngTemplateOutlet="action === 'delete' ? 'DELETE' : 'MODIFY'"; context="{item}"></ng-container>
</ng-container>

Erickson Ferreira · Answer 1 · 2023-02-24T12:55:35.993

It seems that you are trying to render different models dynamically using *ngTemplateOutlet based on an array of ações. No, it seems that the action variable inside the *ngFor loop is not resolving the string values "DELETE" and "MODIFY".

One possible reason for this could be that the values in the matrix of ações are not all in capital letters, but the model references are. In my example, model references are defined as #DELETE and #MODIFY. Therefore, you may try to alter the values in the action matrix for capital letters to correspond to the model references, like so:

<ng-container *ngFor="let action of actions">
    <ng-container *ngTemplateOutlet="action.toUpperCase()"; context="{item}"></ng-container>
</ng-container>

<ng-template #DELETE let-item="item">delete</ng-template>
<ng-template #MODIFY let-item="item">modify</ng-template>

Dynamic template outlet Angular

1 Answers1