در جلسات قبل با Directiveهای آماده Angular مانند ngIf و ngFor آشنا شدیم. این Directiveها رفتار عناصر HTML را تغییر می‌دهند. اما در بسیاری از پروژه‌ها نیاز داریم Directiveهای مخصوص خودمان را بسازیم.

در این جلسه یاد می‌گیریم چگونه Directive سفارشی (Custom Directive) در Angular ایجاد کنیم.

در این آموزش دو نوع Directive را بررسی می‌کنیم:

  • Attribute Directive
  • Structural Directive

Directive چیست؟

Directiveها دستوراتی هستند که به Angular می‌گویند چگونه یک عنصر HTML را تغییر دهد.

Angular سه نوع Directive دارد:

  1. Component Directive
  2. Attribute Directive
  3. Structural Directive

در این جلسه روی دو مورد آخر تمرکز می‌کنیم.

Attribute Directive چیست؟

Attribute Directive ظاهر یا رفتار یک عنصر HTML را تغییر می‌دهد.

مثال‌های معروف:

  • ngClass
  • ngStyle

این Directiveها ساختار DOM را تغییر نمی‌دهند؛ فقط ویژگی‌های عنصر را تغییر می‌دهند.

ساخت Attribute Directive

برای ساخت Directive می‌توان از Angular CLI استفاده کرد.

ng generate directive directives/highlight

یا کوتاه‌تر:

ng g d directives/highlight

کد 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.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

توضیح کد

ElementRef

اجازه می‌دهد به عنصر واقعی DOM دسترسی داشته باشیم.

this.el.nativeElement

به عنصر HTML اشاره می‌کند.

HostListener

به ما اجازه می‌دهد به eventهای عنصر گوش دهیم.

مثلاً:

mouseenter
mouseleave

استفاده از Directive

در HTML:

<p appHighlight>
این متن با هاور موس هایلایت می‌شود
</p>

وقتی موس روی متن برود، پس‌زمینه زرد می‌شود.

ارسال مقدار به Directive

می‌توانیم Directive را قابل تنظیم کنیم.

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input() appHighlight = '';

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

استفاده:

<p [appHighlight]="'lightblue'">
متن با رنگ سفارشی
</p>

Structural Directive چیست؟

Structural Directive ساختار DOM را تغییر می‌دهد.

یعنی می‌تواند:

  • عناصر را ایجاد کند
  • عناصر را حذف کند

مثال‌های معروف:

  • ngIf
  • ngFor

این Directiveها معمولاً با * استفاده می‌شوند.

<div *ngIf="isLoggedIn"></div>

ساخت Structural Directive

ابتدا Directive جدید ایجاد می‌کنیم.

ng g d directives/if

کد Directive

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

@Directive({
  selector: '[appIf]'
})
export class IfDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

توضیح بخش‌های مهم

TemplateRef

به template عنصر اشاره می‌کند.

ViewContainerRef

جایی است که Angular عنصر را در DOM قرار می‌دهد.

استفاده از Structural Directive

<div *appIf="isVisible">
این محتوا نمایش داده می‌شود
</div>

اگر مقدار isVisible برابر true باشد، عنصر نمایش داده می‌شود.

تفاوت Attribute و Structural Directive

Attribute Directive

  • ظاهر یا رفتار عنصر را تغییر می‌دهد
  • ساختار DOM را تغییر نمی‌دهد

Structural Directive

  • ساختار DOM را تغییر می‌دهد
  • عناصر را اضافه یا حذف می‌کند

جمع‌بندی

در این جلسه یاد گرفتیم:

  • Directive چیست
  • Attribute Directive چگونه ساخته می‌شود
  • Structural Directive چگونه ساخته می‌شود
  • چگونه Directive سفارشی در Angular ایجاد کنیم

Directiveها ابزار بسیار قدرتمندی هستند که به ما اجازه می‌دهند رفتارهای قابل استفاده مجدد در پروژه ایجاد کنیم.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور