Formattazione condizionale in Angular 17

Finalmente la versione 17 di Angular ha portato un miglioramento nella formattazione condizionale!

Era anche ora dire....

Quindi, facciamo finta che questo è il nostro componente e che nella pagina dobbiamo visualizzare una scritta a seconda del valore di loggato:

import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'test-angular';
  loggato = true;
}

Prima avremmo fatto così:

<div *ngIf="loggato; else non_loggato">
  Sei loggato
</div>
<ng-template #non_loggato>
  Esegui il login
</ng-template>

Adesso facciamo così:

@if (loggato) {
  <p>Sei loggato</p>
} @else {
  <p>Esegui il login</p>
}

Enjoy!