Compared to other SPA frameworks, Angular really made it quite cumbersome to do simple things like an if/else to show/hide certain UI parts.
The new syntax is so much more succinct, it gets rid of excess html tags, is easier to remember and it doesn’t need to be added to the imports array of a standalone component.
Need to import NgIf from @angular/common.
<span *ngIf="boolVar; else boolFalse">
TRUE
</span>
<ng-template #boolFalse>
FALSE
</ng-template>
@if(boolVar) {
TRUE
} @else {
FALSE
}
Need to import NgFor from @angular/common.
<span *ngFor="let el of elements; index as i; first as isFirst">
{{ i }}: {{ el.desc }} (first={{isFirst}})
</span>
Available “special” variables:
Adding trackBy: trackElFn is optional and is only needed when you are running into performance issues.
trackElFn(index: number, el: T) {
return el.id;
}
The track is mandatory in the new syntax.
@for(el of elements; track el.id; let i = $index; let isFirst = $first) {
{{ i }}: {{ el.desc }} (first={{isFirst}})
}
Need to import NgSwitch, NgSwitchCase and NgSwitchDefault from @angular/common.
<div [ngSwitch]="aNumber">
<span *ngSwitchCase="1">ONE</span>
<span *ngSwitchCase="2">TWO</span>
<span *ngSwitchDefault>OTHER</span>
</div>
@switch(randomNumber) {
@case(1) {ONE}
@case(2) {TWO}
@default {OTHER}
}
This was previously not possible out of the box but the same could be achieved with an ngIf:
<span *ngIf="randomObs$ | async as randomNr">
Nr = {{ randomNr }}
</span>
Don’t forget the ending ;!
@let randomNr = randomObs$ | async;
Nr = {{ randomNr }}
Stuff that came into being during the making of this post
angular/angular: v19