#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

مفاهیم SSR و Hydration در Angular

یکی از مهم‌ترین پیشرفت‌های Angular اینه که Server-Side Rendering (SSR) و Hydration حالا به‌صورت جدی و رسمی در خود فریم‌ورک پشتیبانی می‌شن و دیگه چیز اضافه و فرعی نیستن.

قبلاً با Angular Universal می‌تونستیم صفحات رو روی سرور render کنیم.
اما حالا با پشتیبانی از Hydration، Angular می‌تونه:
🔸اول HTML را روی سرور render کنه
🔸خیلی سریع همون HTML را برای مرورگر بفرسته
🔸به‌ جای اینکه همه چیز رو دوباره از صفر render کنه، همون HTML رو دوباره استفاده (reuse) کنه که با bind کردن event listener‌هایی که از DOM صدا زده میشه hydration اتفاق میفته و به همون render اولیه اضافه و فراخوانی میشه بدون اینکه DOM از اول ساخته بشه.

نتیجه چیه؟
🔸یک: First Contentful Paint (FCP) سریع‌تر می‌شه
🔸 دو:‌ SEO بهتر می‌شه
🔸سه: Core Web Vitals بهبود پیدا می‌کنه (موارد LCP و FID و CLS‌ای که برای Audit کنسول چک میکنیم برای بهبود performance و SEO)

برای داشبورد سازمانی enterprise و پلتفرم‌های عمومی، این موضوع واقعاً مهم و تأثیرگذاره و
خبری هم از Blink زدن نیست

#ssr
#seo
#angularhydration
@angularcafe

امروز یه سایتی پیدا کردم که توش افکت های خیلی خوبی برای Bento Grid design میتونین ایجاد کنین

اگه زیاده روی نکنیم تو استفاده اش میتونه زیبایی خاصی به Bento grid های سایت هامون اضافه کنه

انیمیشن های ریز و چشم گیر 👀👌🏾

https://ngxui.com/

انگار Angular بالاخره داره وارد یه دوره‌ی جدید میشه:

یکی از جذاب‌ترین چیزهایی که با Angular 22 قراره بیشتر جدی بشه، حرکت به سمت Signal Forms هست.
یعنی کم‌کم از این مدل‌ها فاصله می‌گیریم :
❌ FormBuilder
❌ FormGroup
❌ FormControl
❌ valueChanges
❌ patchValue
و می‌ریم سمت یه ساختار تمیزتر، ساده‌تر و reactiveتر :

public user = signal({
  name: '',
  email: ''
});
public form = form(this.user);

ماجرا فقط کوتاه‌تر شدن syntax نیست:
✅ boilerplate کمتر
✅ خوانایی بهتر
✅ مدیریت state ساده‌تر
✅ معماری Signal-first
✅ تجربه توسعه‌دهندگی بهتر

Angular دوباره داره حس مدرن بودن میده

اگه سوالی تو زمینه signal و signal form و مابقی مسایل مربوط به signal داشتین خوشحال میشم کمکی کنم بهتون 👌🏾

#angularsignal
#signalform
#angularcafe

کاش یه سری دوستان توسعه دهنده انگولار که زمان کافی دارن تو روزمره شون ازین کارای ریکت کار ها کپی انگولار شو میزدن و به اشتراک میذاشتن

https://transitions.dev/

#angularcafe

https://io.google/2026/explore/technical-session-31

اگه Google I/O رو مثل من از دست دادید و الان دسترسی به نت دارید ویدیو شو از دست ندید 👌🏾

یه قابلیت جدید در انگولار قراره اضافه بشه که تو Google I/O معرفی کردن به اسم @Boundary که اگر یک بخش از UI خطا داد، کل صفحه خراب نشه و فقط همون بخش با fallback UI جایگزین بشه.

@boundary {
  <heavy-chart [data]="data()" />
} @error {
  <chart-error-state />
}

#angularcafe
#angularfeature

https://angular.love/roadmap

کلیک کنید رو هر آیتم و مقاله های مربوط به اون موضوع رو مطالعه کنید

Angular Roadmap

#angularcafe

https://angular.love/angular-22-key-features-and-changes

تغییراتی که در نسخه ماژور یعنی ٢٢ انگولار قراره در دسترس ممنون باشه

آیا از Signal form و امکانات جدید انگولار مثل httpResource و Schema و form Value Control و... استفاده کردید؟

#angularcafe

امکانات جدیدی که تو نسخه ۲۲ داریم 🤩

http://blog.angular.dev/announcing-angular-v22-c52bb83a4664

#angularcafe

فارسی شده قابلیت های جدید نسخه ۲۲

#angularcafe

تغییرات layout جدید ng version در directory پروژه

#angularcafe

import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';

@Component({
  selector: 'app-user',
  template: `
    @if (user.isLoading()) {
      <p>Loading…</p>
    } @else if (user.hasValue()) {
      <h1>{{ user.value().name }}</h1>
    }
  `
})
export class UserComponent {
  userId = signal(1);
  // Re-fetches automatically whenever userId changes.
  user = httpResource<User>(() => `/api/users/${this.userId()}`);
}

استفاده از httpResource بسیار جذاب و کارامد هست 🥳

#angularsignal
#angularcafe

🚀 ۲۰ تا سوال حرفه‌ای مصاحبه Angular که هر دولوپری باید تمرینشون کنه

1️⃣ در مورد Angular Change Detection کامل توضیح بده. Zone.js دقیقاً پشت‌صحنه چطوری کار می‌کنه؟

2️⃣ فرق Change Detection با حالت Default و OnPush چیه؟

3️⃣ فرق switchMap، mergeMap، concatMap و exhaustMap چیه؟ با مثال واقعی توضیح بده.

4️⃣ مفهوم Dependency Injection تو Angular از داخل چطوری کار می‌کنه؟

5️⃣ از Angular Signals چی میدونی و چه فرقی با RxJS Observable دارن؟

6️⃣ چه چیزهایی باعث memory leak تو پروژه‌های Angular می‌شن و چطوری می‌شه جلوشون رو گرفت؟

7️⃣ فرق Subject، BehaviorSubject، ReplaySubject و AsyncSubject چیه؟

8️⃣ تفاوت Standalone Componentها چه مواردی هستن و چطوری باعث بهتر شدن پروژه‌های Angular می‌شن؟

9️⃣ معماری Angular Ivy رو توضیح بده و بگو چه مزیت‌هایی داره.

🔟 قابلیت Server Side Rendering یا SSR تو Angular چطوری کار می‌کنه؟

1️⃣1️⃣ قابلیت Route Guardها تو Angular چی هستن و هر کدوم رو کی باید استفاده کنیم؟

2️⃣1️⃣ مفهوم Lazy Loading چیه و چطوری باعث بهتر شدن performance اپلیکیشن می‌شه؟

3️⃣1️⃣ فرق Reactive Forms و Template Driven Forms چیه؟

4️⃣1️⃣ چرا trackBy تو *ngFor مهمه و چطوری rendering رو سریع‌تر می‌کنه؟

5️⃣1️⃣ قابلیت HTTP Interceptorها چی هستن و تو پروژه‌های واقعی کجاها به درد می‌خورن؟

6️⃣1️⃣ در مورد Lifecycle hookهای Angular توضیح بده و بگو هر کدوم عملاً کجا استفاده می‌شن.

7️⃣1️⃣ فرق ViewChild، ContentChild، ViewChildren و ContentChildren چیه؟

8️⃣1️⃣ اشتباه‌های رایج یا anti-patternهای RxJS که دولوپرها تو پروژه‌های Angular انجام می‌دن چیا هستن؟

9️⃣1️⃣ برای بهتر کردن performance یه پروژه بزرگ Angular چه کارهایی انجام می‌دی؟

0️⃣2️⃣ اگه بخوای یه پروژه Angular بزرگ و enterprise-level طراحی کنی، معماریش رو چطوری می‌چینی؟

#angularinterview
#angularcafe

کافه انگولار ۱۰۰ تایی شد 🥳

مرسی که همراه این کانالین ❤️

امیدوارم کنار هم کلی مطالب جدید درباره Angular و Frontend یاد بگیریم و تجربه‌هامون رو به اشتراک بذاریم.

#angularcafe

شاید براتون سؤال پیش اومده باشه که بین resource و rxResource و httpResource چه تفاوت‌هایی وجود داره؟

با چند تصویر و توضیح که این تفاوت هارو بیان میکنه همراه بشید

#angularcafe

مقایسه resource و rxResource و httpResource