angular
Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngIf?
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.
Dokumentacja
Podobne wpisy
