@if(...)

This video explains the new @if control flow syntax in Angular 17, highlighting its advantages over the traditional *ngIf directive, with practical examples and best practices.

הסינטקס החדש @if שניתן להשתמש בו כדי להחליף את *ngIf זמין מ-Angular 17. הסינטקס החדש הוא הרבה יותר נקי וקריא, וגם עוצמתי יותר.
בואו נראה את השינויים:

*ngIf -> @if

הדרך הישנה ליצור הצהרת if בטמפלט שלך באנגולר הייתה על ידי שימוש בהוראת ה Directive *ngIf.
הדרך החדשה היא על ידי שימוש בסינטקס @if.
בואו נראה דוגמה:

old-if.component.tsnew-if.component.tsapp.component.ts

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 -> &#64;if</h1>
	<old-if></old-if>
	<new-if></new-if>
`,
})
export class AppComponent {	
}

Read-only

Open Sandbox

נשים לב לכמה נקודות:

• הסינטקס @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 &#64;if</h1>		
`,
})
export class AppComponent {	
}

Open Sandbox