angular

Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngIf?

1 listopada 2024

W Angular 17 pojawiło się built-it control flow, które zostało ustabilizowane w wersji 18. Są to zamienniki dyrektyw *ngIf, *ngFor, *ngSwitch.

@if jest odpowiednikiem *ngIf. Przykładowe wykorzystanie:

// *ngIf - if-else
<div *ngIf="a > b; then aGreaterBlock else aLessOrEqualBlock"></div>
<ng-template #aGreaterBlock>A jest większe niż B</ng-template>
<ng-template #aLessOrEqualBlock>A jest mniejsze lub równe B</ng-template>
 
// @if - if, else if, else
@if (a > b) {
  A jest większe niż B
} @else if (a < b){
  A jest mniejsze niż B
} @else {
  A jest równe B
}

@if można używać również z async pipe. Przykład wykorzystania:

// *ngIf - async pipe
<ng-container *ngIf="vm$ | async as viewModel">
  
</ng-container>
 
// @if - async pipe
@if (vm$ | async; as viewModel) {
  
}

@if poprawia czytelność szablonów, oddziela logikę od tagów html oraz oferuje klauzulę @else, która będzie wykonana, jeśli zdefiniowany warunek nie zostanie spełniony.