1

I have a model that in its structure has a list and one enum property like this:

export class myModel {
    Items: any[]=[];
    ItemsType: ItemType;
}

and I want to show the list of my model in the template with ng-container and ng-template but inner content of ng-template not showing in my result my template is like this:

<nb-accordion>
  <ng-container *ngFor="let model of myModels">
    <ng-template [ngIf]="model.itemType == 0">
      <nb-accordion-item *ngFor="let item of model.Items">
        <nb-accordion-item-header>
          ...some content
        </nb-accordion-item-header>
        <nb-accordion-item-body>
          ...some content
        </nb-accordion-item-body>
      </nb-accordion-item>
    </ng-template>
    <ng-template [ngIf]="model.itemType == 1">
      <nb-accordion-item *ngFor="let item of model.socialNetworkItems">
        <nb-accordion-item-header>
          ...some content
        </nb-accordion-item-header>
        <nb-accordion-item-body>
          ...some content
        </nb-accordion-item-body>
      </nb-accordion-item>
    </ng-template>
  </ng-container>
</nb-accordion>

can you help me?

hosein
  • 139
  • 1
  • 4
  • 14
  • `ng-template` does not render any thing. You're looking for `ng-container`,(the use of ng-template is giving a reference variable and choose between two options see e.g. https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ – Eliseo Jul 20 '19 at 08:35

1 Answers1

1

It is a basic mistake of using model.ItemsType instead of model.itemtype

StackBlitz demo: https://stackblitz.com/edit/angular-nested-template-reference

For those who are thinking that ng-template cannot be used with *ngIf see the accepted answer at why *ngIf doesnt'work with ng-template? where the syntactical sugar format *ngIf is replaced with [ngIf] directive (but is not advised).

Saksham
  • 9,037
  • 7
  • 45
  • 73