Search code examples
javascripthtmlangularangular2-templateng-container

Why ng-container showing my td tag and template element does not showing my td tag?

I want to show td tag if my statement is true. So I am using <template> element to check that condition. But after rendering the screen I couldn't see the td tag inside the template element.

enter image description here

<table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0">
  <tr style="width:100%">
    <td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldPrefix}}</td>
    <td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldName}}</td>

    **//here am using template element**
    <template *ngIf="datavalue.IsOverridable">
                                        <td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}"
                                            (click)="AddNewDialog(datavalue)">
                                            <span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"></span>
                                            <span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"><img class="image" title="Multi Line" src="assets/images/MultiLine.png" /></span>
                                        </td>
                                    </template>


  </tr>
</table>

But it's working fine if am using <ng-container> element instead of <template> element.

enter image description here

<table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0">
  <tr style="width:100%">
    <td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldPrefix}}</td>
    <td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldName}}</td>


    **//here am using ng-container element**
    <ng-container *ngIf="datavalue.IsOverridable">
      <td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}" (click)="AddNewDialog(datavalue)">
        <span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"></span>
        <span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"><img class="image" title="Multi Line" src="assets/images/MultiLine.png" /></span>
      </td>
    </ng-container>


  </tr>
</table>

Questions : -

  • Why ng-container does show my td tag and template element does not shows my td tag?

  • Explain when I would use ng-template instead of ng-container?

Solution

  • You should use with ng-template like this 

    <ng-template [ngIf]="condition"><div>...</div></ng-template>

    The difference with ng-container that you can use directives like this *ngFor that require template but it will not create anything in html.

    <ng-container *ngFor="let item of items">{{item }}</ng-container>

    but when you use ng-template you will need to write to full form

    <ng-template ngFor let-item [ngForOf]="items" let-i="index" 
   [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

    See also