**Directives** هي أصناف تضيف سلوكاً أو تعدّل العناصر في DOM. Angular يحتوي على ثلاثة أنواع: **components** (directives مع template)، **structural directives** (تغيّر تخطيط DOM)، و **attribute directives** (تغيّر المظهر/السلوك). ## Structural directives — تغيّر بنية DOM إنها تضيف أو تزيل العناصر، وتبدأ بـ `*`: ```html

Welcome back!

{{ i }}: {{ item.name }}

Active

Unknown

``` (Angular الحديث يوفر أيضاً الصيغة الأحدث `@if` / `@for` التي تحل محل `*ngIf`/`*ngFor`.) ## Attribute directives — تغيّر المظهر/السلوك إنها تعدّل عنصراً موجوداً دون إضافة/إزالة عناصر: ```html

...

``` ## كتابة custom attribute directive ```ts import { Directive, ElementRef, HostListener } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) // used as

export class HighlightDirective { constructor(private el: ElementRef) {} @HostListener("mouseenter") onEnter() { this.el.nativeElement.style.background = "yellow"; // change the host element } @HostListener("mouseleave") onLeave() { this.el.nativeElement.style.background = ""; } } ``` يحصل custom directive على مرجع للعنصر المضيف ويمكنه الاستجابة للأحداث — هنا، التمييز عند تمرير الماوس. يُستخدم كـ `

Text

`. ## لماذا structural directives تستخدم * ```html

...

``` `*` هو اختصار يلف العنصر في `` — وهذا هو السبب الذي يجعل structural directives يمكنها إضافة/إزالة العنصر بالكامل. ## لماذا يهم ذلك Directives هي كيفية قيام Angular بمعالجة DOM بطريقة تصريحية. الـ directives المدمجة structural (`*ngIf`/`*ngFor`/`@if`/`@for`) و attribute (`ngClass`/`ngStyle`/`ngModel`) توفر معظم الاحتياجات، والـ directives المخصصة تتيح لك تغليف سلوك DOM قابل لإعادة الاستخدام (highlight، tooltip، click-outside). فهم الفئات الثلاث — والتعرف على أن components هي نفسها directives مع templates — هو أساسي لنموذج Angular template.

Angular أسئلة