הסינטקס החדש @if
שניתן להשתמש בו כדי להחליף את *ngIf
זמין מ-Angular 17.
הסינטקס החדש הוא הרבה יותר נקי וקריא, וגם עוצמתי יותר.
בואו נראה את השינויים:
*ngIf
-> @if
הדרך הישנה ליצור הצהרת if בטמפלט שלך באנגולר הייתה על ידי שימוש בהוראת ה Directive *ngIf
.
הדרך החדשה היא על ידי שימוש בסינטקס @if
.
בואו נראה דוגמה:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import {OldIfComponent} from './old-if.component';
import {NewIfComponent} from './new-if.component';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-root',
standalone: true,
imports: [OldIfComponent, NewIfComponent],
template: `
<h1>*ngIf -> @if</h1>
<old-if></old-if>
<new-if></new-if>
`,
})
export class AppComponent {
}
Read-only
נשים לב לכמה נקודות:
- הסינטקס
@if
הוא הרבה יותר נקי וקריא.
- המקרה של
else
הוא הרבה יותר קל לכתיבה בסינטקס החדש.
- ניתן להשתמש ב-
@else if
שלא ניתן בסינטקס הישן.
Playground
ניתן להתאמן על הסינטקס החדש @if
ולכתוב קוד בחלון למטה:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<h1>Practice @if</h1>
`,
})
export class AppComponent {
}