אחרי שבמאמר הקודם למדנו על Binding באפליקציית Angular, כעת נלמד על Directives

Directives באנגולר הם אחד הכלים החזקים ביותר שמאפשרים לנו להרחיב את הפונקציונליות של קומפוננטות ולהוסיף התנהגות חדשה לאלמנטים ב-DOM. במאמר זה נסקור את הסוגים השונים של Directives, נלמד כיצד ליצור ולהשתמש בהם, ונראה דוגמאות קוד מפורטות.

סוגי Directives באנגולר

באנגולר ישנם שלושה סוגים עיקריים של Directives:

• Component Directives: הקומפוננטות עצמן הן Directives עם תבנית (Template).
• Structural Directives: משנים את המבנה של ה-DOM על ידי הוספה או הסרה של אלמנטים. דוגמה לכך היא *ngIf.
• Attribute Directives: משנים את ההתנהגות או המראה של אלמנטים קיימים. דוגמה לכך היא ngClass.

יצירת Attribute Directive מותאם אישית

בואו ניצור Attribute Directive מותאם אישית שמשנה את הצבע של טקסט בעת מעבר עכבר מעליו.

שלב 1: יצירת Directive

נשתמש ב-CLI של אנגולר כדי ליצור Directive חדש בשם HighlightDirective:

ng generate directive Highlight

שלב 2: עדכון קובץ ה-TypeScript של ה-Directive

נעדכן את הקוד בקובץ highlight.directive.ts כדי לשנות את צבע הטקסט:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

שלב 3: שימוש ב-Directive בקומפוננטה

נשתמש ב-Directive בקובץ ה-HTML של הקומפוננטה:

<p appHighlight>Hover over this text to see the highlight effect.</p>

שימוש ב-Structural Directives

Structural Directives משנים את מבנה ה-DOM על ידי הוספה או הסרה של אלמנטים. דוגמה נפוצה היא *ngIf:

<div *ngIf="isVisible">
  <p>This text is visible only if the condition is true.</p>
</div>

יצירת Structural Directive מותאם אישית

בואו ניצור Structural Directive שמציג תוכן רק אם למשתמש יש הרשאות מסוימות:

ng generate directive IfAuthorized

נעדכן את הקוד בקובץ if-authorized.directive.ts:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appIfAuthorized]'
})
export class IfAuthorizedDirective {
  @Input() set appIfAuthorized(condition: boolean) {
    if (condition) {
      this.vcRef.createEmbeddedView(this.templateRef);
    } else {
      this.vcRef.clear();
    }
  }

  constructor(
    private templateRef: TemplateRef,
    private vcRef: ViewContainerRef
  ) {}
}

נשתמש ב-Directive בקובץ ה-HTML של הקומפוננטה:

<div *appIfAuthorized="isUserAuthorized">
  <p>This text is visible only if the user is authorized.</p>
</div>

שימוש ב-Built-in Directives

אנגולר מגיע עם מספר Directives מובנים שיכולים לעזור לנו בפיתוח יומיומי:

• ngClass: מאפשר להוסיף או להסיר מחלקות CSS על פי תנאים.
• ngStyle: מאפשר להגדיר סגנונות CSS על פי תנאים.
• ngModel: מאפשר Two-way Data Binding בטפסים.

לדוגמה, נשתמש ב-ngClass כדי להחיל מחלקה CSS על פי תנאי:

<p [ngClass]="{ 'highlighted': isHighlighted }">This text will be highlighted if the condition is true.</p>

סיכום

במאמר זה למדנו על השימוש ב-Directives באנגולר, כולל יצירת Attribute Directives ו-Structural Directives מותאמים אישית, ושימוש ב-Built-in Directives. Directives הם כלי חזק שמאפשר לנו להרחיב את הפונקציונליות של קומפוננטות ולהוסיף התנהגות חדשה לאלמנטים ב-DOM בצורה פשוטה ויעילה. אם אתם מעוניינים ללמוד בצורה מעמיקה יותר, אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

במאמר הבא נלמד על טפסים ב Angular