Why ng-template is not working in Angular?

Question

We can't use *ngFor and *ngIf on the same element. A technique is to nest them. Almost everywhere it's OK, except in tables when we want to both loop over tr and print them conditionally.

As suggested here we should use <template>, or <ng-template> elements, so that it won't be printed to the DOM.

But I can't make it work. It simply doesn't print out anything. Here's a plunker to show it in action.

What should I do?

Answer 1

As *ngIf is rendered as [ngIf], try using [ngIf] directly on template it should work.

When we prepend a directive with * we are telling it to use the element it’s attached to as the template. Basically *ngIf is a combo of ng-template + [ng-If].

Html:

<tr *ngFor="let item of items">
   <ng-template [ngIf]="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
   </ng-template>
</tr>

or simply you can decorate with *ngIf

<tr *ngFor="let item of items">
   <div ngIf*="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
   </div>
</tr>

updated plunker

Useful article on Structural directives

Answer 2

so there is something call ng-container also,

ng-container and ng-template Both of them are at the moment (2.x, 4.x) used to group elements together without having to introduce another element which will be rendered on the page (such as div or span).

the difference between ng-template and ng-container is

ng-template is used for a structural directive like ng-if, ng-for and ng-switch. If you use it without the structural directive, nothing happens and renders.

ng-container is used when you don't have a suitable wrapper or parent container. In most cases, we are using div or span as a container but in such cases when you want to use multiple structural directives, but you can't use more than one structural directive on an element, in that case, ng-container can be used as a container

in your case

<ng-template> is used to declare a template. What you want here is to hide/display some nodes

so you need to use ng-container for the same like

<tr *ngFor="let item of items">
    <ng-container *ngIf="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
    </ng-container>
</tr>

there are couple of links which will help you to understand the both

related link

structural directives

discussion on ng-template and ng-container

Answer 3

Here is how you might get ng-template work when it is used to replace the else case while using *ngIF

<p *ngIf="a > b; else notTrue"> A Is Greater Than B <p>
<ng-template #notTrue>
  <> B Is Greater Than A <p>
</ng-template>

Inside the first paragraph tag create a variable called notTrue and use it inside the ng-template tag to print the line in the paragraph if a < b,

Answer 4

I hope you might have found the answer by now. This is for people who are not yet stumbled upon the answer. A better way to interpret the ng-template is a template element that angular uses with a structural directive (*ngIf, *ngSwitch) that gets compiled to generate the structures inside it. The issue with using the above structural directives along with a ng-template is that, when *ngIf is true a template will be generated. But nowhere we specify that this template should be rendered. An alternate approach is using the *ngIf as [ngIf] property binding value where the property bound should be a boolean value as such.

Now angular interprets that as the template should be generated and rendered on the boolean value being true. A very basic example is provided below.

( I am unable to use the pluker link. So here is my stackblitzlink

Hope this helps. There is a great article on this ng-template