Ng-Template not rendering my HTML content

Question

I am creating a simple app to test some stuff using observables and for some reason, when I wrap that code using an ng-template tag, the HTML simply doesn't show up.

The reason I'm using this ng-template before the div, is to use an *ngIf. Initially, I thought that the *ngIf was the problem, but when I removed that statement from the template, it still did not work. So the If is not the problem.

Any idea?

<!-- If I remove the <ng-template> tag, the HTML is rendered, but with it, it doesn't work -->
<ng-template>
    <div class="messages-container" *ngIf="(messagesService.errors$ | async) as errors">
        <div class="messages" *ngFor="let error of errors">{{error}}</div>
        <mat-icon class="close" (click)="onClose()">close</mat-icon>
    </div>
</ng-template>

Edit: When I use [ngIf] instead of *ngIf it works, but I still don't understand why works whit [ngIf] and why it does not work with no condition.

Andrei · Accepted Answer · 2021-11-11 00:48:59Z

4

star syntax in structural directives like here *ngIf implicitly creates a template from the element that this directive is being used on. no need to explicitly write <ng-temlate> just use *ngIf

answered Nov 11, 2021 at 0:48

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vítor França Over a year ago

Can you give me an example?

Andrei Over a year ago

just remove <ng-template> from you code, and it should work just fine

Vítor França Over a year ago

But that's the point, why I can't use the <ng-template> with the start syntax nor without any structural directive?

Vítor França Over a year ago

If I change it to <ng-container> works fine

Andrei Over a year ago

because by using <ng-template> you are creating a rule of how to create a piece of html which then you can render somewhere. but you are not rendering it anywhere. If you add [ngIf] directive to <ng-template> element, then this directive executes the logic of rendering this template 1 time. if you use [ngForOf]... on this template then it will be rendered multiple times

|

Collectives™ on Stack Overflow

Ng-Template not rendering my HTML content

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related