Angular v15 *ngIf and [ngIf] differences-CodePudding

Currently, I'm trying to update Angular v14 to v15 including the new material components.

Some of my own components do not generate content anymore because of the strange behavior of the "*ngIf" directive.

hasSession:{{hasSession}}<br>
<div *ngIf="hasSession">A: *ngIf = {{hasSession}}</div>
<div [ngIf]="hasSession">B: [ngIf] = {{hasSession}}</div>

The "A:", based on "*ngIf" doesn't show. Output

hasSession:true
B: [ngIf] = true

Any clue?

CodePudding user response：

*ngIf is the shorthand syntax for angulars structural ngIf directive

<div *ngIf="hasSession">A: *ngIf = {{hasSession}}</div>

Angular will expand this shorthand syntax to

<ng-template [ngIf]="hasSession">
 <div>A: *ngIf = {{hasSession}}</div>
</ng-template>

i.e. those 2 templates are the same, but the first is shorter and more readable.

I have no idea why your use of [ngIf] on a div worked/works at all:

<div [ngIf]="hasSession">B: [ngIf] = {{hasSession}}</div>

i.e. this Stackblitz example will show an error on the console, when you try to use this.

I also see no relation to Material Components, because ngIf is plain Angular.

CodePudding user response：

After getting some new insights, from the comments, I finally found my stupid error. The import { CommonModule } from '@angular/common'; was missing.

It looks so simple and I didn't have these problems before. But after using the conversion tool of Angular Material components from v14 to v15. A lot of imports were gone. Including these most basic ones.

I didn't get any build errors, besides visual ones, like missing HTML component code. This was the instruction I used, see Run the migration tool.

ng generate @angular/material:mdc-migration