title: Why ng-container showing my td tag and template element does not showing my td tag?
body: <p>I want to show  <code>td</code> tag if my statement is true. So I am using  <code>&lt;template&gt;</code> element to check that condition. <strong>But after rendering the screen I couldn't see the <code>td</code> tag inside the <code>template</code> element</strong>.</p>
  <p><a href="https://i.stack.imgur.com/ab6ch.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ab6ch.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0"&gt;
    &lt;tr style="width:100%"&gt;
      &lt;td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }"&gt;{{datavalue.FieldPrefix}}&lt;/td&gt;
      &lt;td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }"&gt;{{datavalue.FieldName}}&lt;/td&gt;
  
      **//here am using template element**
      &lt;template *ngIf="datavalue.IsOverridable"&gt;
                                          &lt;td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}"
                                              (click)="AddNewDialog(datavalue)"&gt;
                                              &lt;span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"&gt;&lt;/span&gt;
                                              &lt;span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"&gt;&lt;img class="image" title="Multi Line" src="assets/images/MultiLine.png" /&gt;&lt;/span&gt;
                                          &lt;/td&gt;
                                      &lt;/template&gt;
  
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>But it's working fine</strong> if am using <code>&lt;ng-container&gt;</code> element instead of <code>&lt;template&gt;</code> element.</p>
  <p><a href="https://i.stack.imgur.com/aDN9d.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aDN9d.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0"&gt;
    &lt;tr style="width:100%"&gt;
      &lt;td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }"&gt;{{datavalue.FieldPrefix}}&lt;/td&gt;
      &lt;td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }"&gt;{{datavalue.FieldName}}&lt;/td&gt;
  
  
      **//here am using ng-container element**
      &lt;ng-container *ngIf="datavalue.IsOverridable"&gt;
        &lt;td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}" (click)="AddNewDialog(datavalue)"&gt;
          &lt;span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"&gt;&lt;/span&gt;
          &lt;span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"&gt;&lt;img class="image" title="Multi Line" src="assets/images/MultiLine.png" /&gt;&lt;/span&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>Questions : -</h2>
  <blockquote>
  <ul>
  <li><p>Why <code>ng-container</code> does show my <code>td</code> tag and <code>template</code> element does not shows my <code>td</code> tag?</p>
  </li>
  <li><p>Explain when I would use <code>ng-template</code> instead of <code>ng-container</code>?</p>
  </li>
  </ul>
  </blockquote>