آموزش انگولار جلسه ۹ — معرفی Directiveها و تفاوت Structural و Attribute در Angular 17

Directiveها یکی از مهم‌ترین بخش‌های Angular هستند و به ما اجازه می‌دهند رفتار عناصر HTML را کنترل کنیم.
با Directive می‌توانیم:

• ساختار DOM را تغییر دهیم
• استایل یا رفتار المان‌ها را تغییر دهیم
• المان‌ها را نمایش یا پنهان کنیم
• داده‌ها را در صفحه تکرار کنیم
• رفتار جدید به HTML اضافه کنیم

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

1. Component
2. Attribute Directive
3. Structural Directive

در این جلسه دقیقاً یاد می‌گیریم:

• Directive چیست؟
• چه فرقی بین Structural و Attribute وجود دارد؟
• چه زمانی باید از هرکدام استفاده کنیم؟
• چند مثال کاربردی و واقعی
• یک دایرکتیو سفارشی برای هر دو نوع معرفی می‌کنیم

Directive چیست؟

Directive در اصل یک کلاس TypeScript همراه با Decorator @Directive است که:

• رفتار یا ظاهر یک المان را تغییر می‌دهد
• می‌تواند روی یک تگ HTML اعمال شود
• بدون داشتن Template خودش می‌تواند روی DOM تأثیر بگذارد

در Angular 17، Directiveها همچنان بخشی کلیدی از سیستم ساخت و مدیریت UI هستند.

انواع Directive در Angular 17

۱) Component (کامپوننت)

یک نوع ویژه از Directive که:

• Template دارد
• استایل دارد
• ساختار UI را می‌سازد

در واقع هر Component خودش یک Directive است.

۲) Attribute Directive — دایرکتیوهای صفاتی

این نوع Directive ظاهر و رفتار یک المان موجود را تغییر می‌دهد.
بدون اینکه DOM را کم یا زیاد کند.

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

• ngClass
• ngStyle
• ngModel
• custom-attribute-directives

تغییراتی که می‌توان انجام داد:

• تغییر استایل
• تغییر کلاس
• تغییر رفتار هنگام هاور
• مدیریت رویدادها
• دسترسی و کنترل DOM موجود

۳) Structural Directive — دایرکتیوهای ساختاری

این نوع Directive ساختار DOM را تغییر می‌دهد.

یعنی:

• المان جدید اضافه می‌کند
• المان را حذف می‌کند
• شرایط منطقی ایجاد می‌کند
• حلقه ایجاد می‌کند

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

• *ngIf
• *ngFor
• *ngSwitch
• @if (سینتکس جدید کنترل جریان)
• @for
• @switch

نشانه اصلی این نوع

دارای * هستند، چون روی قالب کار می‌کنند نه روی یک المان ساده.

تفاوت اصلی Attribute و Structural Directive

Attribute Directive

• ظاهر، استایل یا رفتار یک المان را تغییر می‌دهد
• ساختار DOM را دست‌کاری نمی‌کند
• با * استفاده نمی‌شود
• مثال: ngClass، ngStyle

Structural Directive

• DOM را اضافه/حذف یا تغییر می‌دهد
• ساختار صفحه را تغییر می‌دهد
• معمولاً با * استفاده می‌شود
• مثال: ngIf، ngFor

خلاصه تفاوت‌ها

Attribute: تغییر ظاهر و رفتار
Structural: تغییر ساختار DOM

مثال‌های کاربردی و عملی

۱) مثال ngIf — یک Structural Directive

<div *ngIf="isLoggedIn">
  Welcome back!
</div>

این کد اگر isLoggedIn = false باشد، کل div را از DOM حذف می‌کند.

۲) مثال ngFor — ساخت لیست

<li *ngFor="let user of users">
  {{ user.name }}
</li>

یک نمونه از تغییر ساختار DOM: ایجاد چندین li جدید.

۳) مثال ngClass — یک Attribute Directive

<p [ngClass]="isActive ? 'active' : 'inactive'">
  User Status
</p>

DOM حذف نمی‌شود—فقط کلاس تغییر می‌کند.

ساخت اولین Attribute Directive سفارشی

نام دایرکتیو: hoverHighlight

کار: هنگام هاور، رنگ متن تغییر کند.

TypeScript

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

@Directive({
  selector: '[hoverHighlight]',
  standalone: true
})
export class HoverHighlightDirective {

  @Input() hoverHighlight = 'yellow';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.hoverHighlight;
  }

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

HTML

<p hoverHighlight="lightblue">
  Hover over me!
</p>

این یک Attribute Directive واقعی است.

ساخت یک Structural Directive سفارشی

نام دایرکتیو: showIfRole

کار: اگر نقش (role) کاربر برابر مقدار ورودی بود، المان نمایش داده شود.

TypeScript

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

@Directive({
  selector: '[showIfRole]',
  standalone: true
})
export class ShowIfRoleDirective {

  private currentRole = '';

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

  @Input() set showIfRole(role: string) {
    this.currentRole = role;
    this.updateView();
  }

  updateView() {
    const userRole = 'admin'; // نمونه برای تست

    if (userRole === this.currentRole) {
      this.viewContainer.clear();
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

HTML

<div *showIfRole="'admin'">
  Only admin can see this.
</div>

این دایرکتیو:

• DOM را حذف یا اضافه می‌کند
• یک Structural Directive واقعی است

Angular 17 و کنترل جریان جدید (Control Flow Syntax)

از Angular 17 به بعد، می‌توانیم بجای ngIf و ngFor از سینتکس جدید استفاده کنیم.

مثال با @if

@if (isLoggedIn) {
  <p>Welcome!</p>
}

مثال با @for

@for (user of users; track user.id) {
  <p>{{ user.name }}</p>
}

این سینتکس:

• سریع‌تر
• خواناتر
• نزدیک به زبان‌های برنامه‌نویسی مدرن است

جدول مقایسه‌ای کوتاه

جمع‌بندی

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

• Directive چیست و چرا مهم است
• سه نوع Directive در Angular وجود دارد
• تفاوت کامل Attribute و Structural
• مثال‌های عملی و واقعی از ngIf، ngFor، ngClass
• ساخت دو دایرکتیو سفارشی
• معرفی سینتکس جدید Angular 17 مانند @if و @for

Directiveها یکی از ابزارهای قدرتمند Angular برای کنترل UI هستند و درک آن‌ها در پروژه‌های واقعی بسیار حیاتی است.

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

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