کافه انگولار
#Angularinterview
سوال و جواب مصاحبه Angular - روز چهارم (Directiveها)
ادامه‌ی سری روزانه مصاحبه Angular؛ این بار سراغ مفاهیمی می‌ریم که مصاحبه‌کننده‌ها انتظار دارن هم شفاف توضیحش بدی، هم با مثال واقعی.
🔹 موضوع روز ۴: Angular Directives
1️⃣ سوال: Directive در Angular چیه؟
پاسخ: Directive یک class هست که به elementهای موجود در DOM رفتار اضافه می‌کنه یا نحوه‌ی render شدن elementها رو تغییر می‌ده.
2️⃣ سوال: انواع Directiveها در Angular چی‌ها هستن؟
پاسخ:
• یک: Component Directives
خود componentها هم نوعی directive هستن که template دارن.
• دو: Structural Directives
ساختار DOM رو با اضافه/حذف کردن elementها تغییر می‌دن.
مثال‌ها: ngIf، *ngFor، *ngSwitch* که با control flow جدید 17+ انگولار بیشتر شون دیگه استفاده نمیشن
• سه: Attribute Directives
ظاهر یا رفتار یک element رو تغییر می‌دن.
مثال‌ها: ngClass، ngStyle، و directiveهای custom
3️⃣ سوال: فرق اصلی Structural و Attribute Directive چیه؟
پاسخ:
• یک: Structural: معمولاً با * شروع می‌شن و layout/ساختار DOM رو تغییر می‌دن
• دو: Attribute: مثل یک attribute روی element قرار می‌گیرن و رفتار/ظاهر همون element رو تغییر می‌دن
4️⃣ سوال: چرا Angular فقط اجازه می‌ده روی هر element یک Structural Directive داشته باشیم؟
پاسخ:
چون هر Structural Directive خودش DOM رو دست‌کاری می‌کنه.
⚠️نکته: اگر چندتا لازم داشتی، باید elementها رو داخل ng-container (یا یک wrapper مناسب) قرار بدی.
5️⃣ سوال: چطور یک Attribute Directive سفارشی می‌نویسی و چه کاربرد واقعی‌ای داره؟
پاسخ: Attribute Directive زمانی به‌درد می‌خوره که بخوای یک رفتار یا ظاهر تکرارشونده رو به چندین element اضافه کنی، بدون اینکه هر بار توی componentها کد تکراری بنویسی.
مثلاً یک directive برای permission یا highlight:
element رو بر اساس نقش کاربر disable/hidden می‌کنه
یا روی hover / focus استایل خاص می‌ده
یا یک behavior مثل auto-focus، auto-select، debounce input و… اضافه می‌کنه
📌 نکته مصاحبه‌ای:
یک Attribute Directive معمولاً با ElementRef و Renderer2 کار می‌کنه تا مستقیم DOM رو دست‌کاری نکنی و استاندارد Angular رو رعایت کنی.
➡️ ادامه: روز ۵ به‌زودی… (Services و Dependency Injection) ⚡️🧠
#Angularinterview
@angularcafe
2 · 188 ·