why *ngIf doesnt'work with ng-template?

AngularAngular2 TemplateNg Template

Angular Problem Overview

I have a condition in the template as follows:

    <p *ngFor="let seat of InfoDetails?.seatInfo">
        <template *ngIf="seat.section">
            Section {{seat?.section}} ,
        <template *ngIf="seat.row">
            Row {{seat?.row}},
        <template *ngIf="seat.seatNo">
            Seat number {{seat?.seatNo}}

I have dataset that contains row and seatNo, but it does not seem to print in the template. what is the issue here?

Angular Solutions

Solution 1 - Angular

Read the doc here https://angular.io/guide/structural-directives especially for

><div *ngIf="hero" >{{hero.name}}</div> > > The asterisk is "syntactic sugar" for something a bit more > complicated. Internally, Angular desugars it in two stages. First, it > translates the *ngIf="..." into a template attribute, template="ngIf > ...", like this. > > <div template="ngIf hero">{{hero.name}}</div> > > Then it translates the template attribute into a > element, wrapped around the host element, like this. > > <ng-template [ngIf]="hero"> <div>{{hero.name}}</div></ng-template> > > - The *ngIf directive moved to the element where it became a property binding,[ngIf]. > - The rest of the

, including its class attribute, moved inside the element.

So for it we have ng-container

 <ng-container *ngIf="seat.section">
    Section {{seat.section}} ,

or use span or div or regular html tag.

 <span *ngIf="seat.section">
    Section {{seat.section}} ,

or if you still want to use ng-template (not recommended)

<ng-template [ngIf]="seat.section">
  Section {{seat.section}} ,


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser7426734View Question on Stackoverflow
Solution 1 - AngularFetrarijView Answer on Stackoverflow