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.

Answer 1

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