https://www.angularspace.com/senior-angular-interview-questions/

یکی از بیشترین unique view های مقاله سایت angular space همین پست سوالات مصاحبه ای انگولار هست

خیلی بدرد شرکت های خیلی بزرگ میخوره که چه داخل چه خارج استفاده کنیم که بهترین خودمون رو ارائه بدیم

#angularinterview
#angular
@angularcafe

درک Time To Interactive (TTI) در Angular +17

تا حالا شده یه صفحه ظاهراً کامل لود بشه و آماده به نظر بیاد، ولی وقتی روش کلیک می‌کنی هیچ واکنشی نشون نده؟
اگه آره، اون تأخیر دقیقاً همون چیزیه که TTI (Time To Interactive) اندازه می‌گیره.

اما TTI یعنی چی؟

TTI = لحظه‌ای که اپ Angular شما واقعاً قابل تعامل و کاملاً responsive می‌شه
یعنی:

* دکمه‌ها کار می‌کنن
* inputها پاسخ می‌دن
* UI روان و بدون مکث حس می‌شه

و Angular چه تأثیری روی TTI داره؟

یک: CSR

TTI معمولاً کندتره چون:
* JavaScript سنگینه
* رندرینگ کاملاً سمت client انجام می‌شه

دو:‌ SSR در Angularهای قدیمی‌تر

ظاهر صفحه زودتر میاد (paint سریع‌تره)، ولی:
چون DOM دوباره render/rebuild می‌شه
تعامل کاربر ممکنه کند بشه یا حتی یه حس lag / flicker ایجاد بشه

سه:‌ Angular +17 (SSR + Hydration)

* همون HTML که سرور رندر کرده reuse می‌شه
* بدون اینکه DOM از نو ساخته بشه، فقط event listenerها attach می‌شن
* تعامل سریع‌تره و معمولاً بدون flicker (همون تیک زدن یا چشمک زدن ui که هنوز کامل چیزی لود نشده و به کاربر نشون میده)

#angular
@angularcafe

میدونستید اگه یک component رو میخواستین با reactive form بصورت custom field در بیارید باید کلی تنظیمات با ControlValueAccessor یا به اختصار CVA رو داخل component تون extend کنین؟

حالا با صدقه سری signal form و کلاس FormValueControl که generic هم هست میتونین با یه model خیلی ساده اون component رو به form تون اضافه کنین و ازش به عنوان field فرم تون استفاده کنید
فقط کافیه به component تون directive مربوط به فیلد رو اختصاص بدید

<SomeComponent [formField]="someName"/>

#angularsignal
#signalform
@angularcafe

https://youtu.be/ARl78Z0XE7M?si=Bkmpt8Sx0L8dwN3R

تو این ویدیو آقای Brian Treese در مورد نحوه استفاده از Directive جدید formRoot که در نسخه ۲۱.۲ اضافه خواهد شد توضیح خوبی میدن

از امروز یه سری سوال و جواب‌های استاندارد و کوتاه مصاحبه انگولار رو هر روز میذارم تو کانال و امروز اولین روز شو میذارم 🤩

#angularinterview
@angularcafe

#Angularinterview:

سوال و جواب مصاحبه ای Angular - روز اول (مبانی Angular)

🔹 موضوع روز ۱: اصول Angular که هر مصاحبه‌کننده‌ای انتظار داره بلد باشی

1️⃣ سوال: Angular چیه؟
پاسخ: Angular یک framework فرانت‌اند بر پایه TypeScript هست که توسط Google توسعه داده شده و برای ساخت اپلیکیشن‌های مقیاس‌پذیر تک‌صفحه‌ای (SPA) با معماری component-based استفاده می‌شه.

2️⃣ سوال: اجزای اصلی و پایه‌ای Angular چی‌ها هستن؟
پاسخ:
• مفهوم: Modules — برای سازمان‌دهی featureهای اپلیکیشن
• مفهوم: Components — کنترل Viewها و منطق UI
• مفهوم: Templates — کد HTML همراه با syntax مخصوص Angular
• مفهوم: Services — منطق business قابل استفاده مجدد
• مفهوم: Dependency Injection (DI) — تزریق و فراهم‌کردن dependencyها به شکل بهینه

3️⃣ سوال: Component چیه؟
پاسخ: Component اصلی‌ترین واحد سازنده UI در Angular هست.
هر Component از این بخش‌ها تشکیل می‌شه:
• HTML template
• TypeScript class
• CSS styles

و هر Component یک بخش مشخص از UI رو کنترل می‌کنه.

4️⃣ سوال: Data Binding در Angular یعنی چی؟
پاسخ: Data Binding یعنی همگام‌سازی داده بین class مربوط به Component و template.

انواعش:
• Interpolation {{ }}
• Property binding [ ]
• Event binding ( )
• Two-way binding [(ngModel)]

5️⃣ سوال: چرا Angular برای پروژه‌های بزرگ مناسبه؟
پاسخ:
• ساختار و conventionهای قوی
• DI داخلی و RxJS
• CLI قدرتمند
• مقیاس‌پذیری و نگهداری راحت‌تر

📌 نکته: با دونستن این مبانی کمک می‌کنه توی مصاحبه‌های Angular یک برداشت اولیه قوی و حرفه‌ای از خودت بسازی.

➡️ ادامه: روز ۲ به‌زودی… (Angular Lifecycle Hooks)

#angularinterview
@angularcafe

یه plugin تقویم یا Datepicker جدید اومده به اسم NGXSMK datepicker که signal friendly هست

از RTL و localization هم ساپورت میکنه

اگه استفاده کردید تجربه تون رو به اشتراک بذارین تو Discussion

https://ngxsmk.github.io/ngxsmk-datepicker/

#angularsignal
#datepicker
@angularcafe

یکی از بهترین PNG to SVG های رایگانی که استفاده کردم این هست:

https://svgconverter.online/

خیلی عالی کار میکنه

#designtools
@angularcafe

وقتی میگیم ما fullstack ایم همچین چیزی (سمت راستی) باید باشه نه سمت چپی 😄

چند درصد سمت راستی رو داری تو skills هات؟

#fullstack
@angularcafe

#Angularinterview

سوال و جواب مصاحبه‌‌ای Angular - روز دوم (Angular Lifecycle Hooks)

ادامه‌ی سری روزانه مصاحبه Angular؛ این بار می‌ریم سراغ موضوعی که تقریباً توی بیشتر مصاحبه‌ها حتماً بهش گیر می‌دن.

🔹 موضوع روز ۲: Angular Lifecycle Hooks

1️⃣ سوال: Angular lifecycle hooks چی هستن؟
پاسخ: Lifecycle hooks یک سری method هستن که بهت اجازه می‌دن به فازهای مختلف زندگی یک component دسترسی داشته باشی - از لحظه‌ی ساخته شدن تا زمان destroy شدن.

2️⃣ سوال: پرکاربردترین lifecycle hookها کدوما هستن؟
پاسخ:
• متد ngOnInit()
بعد از اینکه component ساخته و initialize شد، فقط یک بار اجرا می‌شه.
⚡️ بهترین جا برای API callها و تنظیمات اولیه.

• متد ngOnChanges()
وقتی مقدار input تغییر کنه اجرا می‌شه.
⚡️ زمانی استفاده می‌شه که component باید به تغییرات داده‌ی parent واکنش نشون بده.

• متد ngAfterViewInit()
بعد از اینکه view مربوط به component کامل initialize شد اجرا می‌شه.
⚡️ برای دسترسی به DOM و منطق viewChild خیلی کاربردیه.

• متد ngOnDestroy()
قبل از اینکه component از بین بره اجرا می‌شه.
⚡️ برای cleanup کردن subscriptionها، timerها و event listenerها و کلا پاک سازی حافظه استفاده شده است که بسیار مهمه که رعایت بشه برای بهبود performance سیستم.

در Angular در واقع Hook های بیشتری از موارد یاد شده وجود داره که دوست داشتید میتونیم اونا رو هم مطرح و بررسی کنیم، موارد گفته شده پر‌کاربرد‌ترین‌ها بودن.

3️⃣ سوال: فرق constructor با ngOnInit() چیه؟
پاسخ:
• constructor: بیشتر برای dependency injection استفاده می‌شه که دیگه بهتره به جای استفاده از constructor از inject function بهتره استفاده بشه.
• ngOnInit() : برای منطق initialize شدن component

4️⃣ سوال: چرا ngOnDestroy() مهمه؟
پاسخ: اگر subscriptionها و timer‌ها و listener‌ها رو cleanup نکنی، سیستم دچار memory leak میشه و مشکل performance پیش بیاد.

⚠️ نکته: به جای استفاده از unsubscribe ها در event های rx بهتره از takeUntilDestroyed استفاده کنید که خودکار بعد از destroy شدن component تون subscription رو unsubscribe کنه

📌مفهوم‌های Lifecycle hooks نشون می‌ده چقدر رفتار component رو توی اپلیکیشن واقعی درست می‌فهمی.

➡️ ادامه: روز ۳ به‌زودی… (Change Detection و OnPush Strategy) ⚡️🧠

✍🏻 منتظر نظرات و پیشنهاد‌های سازنده‌تون هستم.

#angularlifecycles
#angular
@angularcafe

یه نمونه signal form و logic structure با اسم گذاری جدید انگولار داخل repo اضافه کردم

https://github.com/angularcafeacademy/angular-signal-form

دمو:
https://angularcafeacademy.github.io/angular-signal-form/

اگه نکته ای توش به مشکل خوردید نظر بدید ✌🏻


#angularsignal
@angularcafe

🛜 سیگنال، بهترین حرکت انگولار

تا همین چند وقته پیش برای یه کار ساده مثل toggle کردن دکمه sidebar‌ای چیزی از rxjs استفاده میکردیم و کلی پیچیدگی‌های مختلف داشتیم که یه کار خیلی پیش‌پا افتاده و ساده انجام بدیم.

تو سال ۲۰۲۶ دیگه این چیزا مهم نیست و صرفا باید بذاریمشون پشت سر و پیچیدگی هارو کم کنیم.

دیگه بهترین state management برای انگولار signal هست و باید به بهترین شکل ازش استفاده کنیم.

کار یه نیرو خبره و سنیور باید این باشه بتونه تو پروژه های بزرگ:
‍‍۱. پیچیدگی هارو کم کنه
۲. پرفورمنس رو ببره بالا
۳. بالاترین reactivity رو تو برنامه بوجود بیاره
۴. بتونه memory leak رو به کمترین حد خودش برسونه

از مشکلات تون تو سیگنال بگید دورهم حل اش کنیم

#angularsignal
@angularcafe

میدونین Zone.js تو Angular مثل یه نگهبان فضوله 😅
‏هر اتفاق async (کلیک، HTTP، تایمر، Promise) می‌افته، می‌پره وسط و میگه: «یه چیزی شد!»
‏بعد Angular هم global change detection رو روی کل برنامه می‌ندازه و کل component tree رو دوباره چک می‌کنه.
‏این برای Developer ساده‌ست، ولی برای runtime دقیق/بهینه نیست.

‏Zoneless Angular میگه: به‌جای «یه چیزی شد… همه‌چی رو چک کن» برو سمت «state عوض شد… فقط همون قسمت رو آپدیت کن».
در ‏نتیجه:
پس zone.js استفاده بشه ساده است همه چی ولی بهینه نیست
و zoneless اگه استفاده بشه، دقت و performance میره بالا
البته با zoneless کردن صرفا track changes ها حذف نمیشه، یعنی Angular داره از automatic global tracking میره سمت explicit reactive state (مثل signals).

پس اگه پروژه تون خیلی پیچیده و بزرگ نیست و میتونین zoneless‌اش کنید بعد متوجه performance بالا و رندرینگ بهترش میشید

#zoneless
#angularsignal
@angularcafe

ظاهر سایت انگولار بروز شده

https://angular.dev/

@angularcafe

تفاوت Async pipe در مقابل takeUntilDestroyed

الگوی قدیمیِ
«destroy$ + takeUntil + ngOnDestroy»

برای جلوگیری از memory leak عملاً بازنشسته شده و Angular حالا دو راه استاندارد و مطمئن داره:

1️⃣ استفاده از async pipe:
بهترین انتخاب وقتی دیتا فقط برای نمایش UIه. Angular خودش subscribe می‌کنه، با هر emit view رو update می‌کنه، و موقع destroy کامپوننت هم خودکار unsubscribe می‌کنه. هدف‌اش اینه که کامپوننت کلاس تا جای ممکن خالی و declarative بمونه.

2️⃣ استفاده از takeUntilDestroyed:
وقتی مجبوریم داخل کلاس subscribe کنیم (مثل Router events، WebSocket، side-effectها).

⚠️ نکته مهم: takeUntilDestroyed() به‌صورت پیش‌فرض باید داخل injection context صدا زده بشه (منظور constructor هست، نه ngOnInit). اگر داخل ngOnInit لازم داریم، باید DestroyRef رو inject کنید و به operator پاس بدید.

🎯 نکته طلاییش چیه؟
اگه فقط میخواین observable تون رو تو template استفاده کنید از async pipe استفاده کنید و اگه میخواین تو logic تون subscribe داشته باشید از takeUntilDestroyed استفاده کنید با رفرنس destroyRef

#observables
@angularcafe

#Angularinterview

سوال و جواب مصاحبه‌ای Angular - روز سوم (OnPush strategy و Change Detection)

ادامه‌ی سری روزانه مصاحبه Angular؛ این بار موضوعی رو می‌گیم که معمولاً مصاحبه‌کننده‌ها باهاش میزان شناختت از performance رو می‌سنجن.

🔹 موضوع روز ۳: Change Detection در Angular

1️⃣ سوال: Change Detection چیه؟
پاسخ: Change Detection مکانیزمیه که Angular باهاش تغییرات داده رو با UI همگام می‌کنه. هر وقت state اپلیکیشن تغییر کنه، Angular componentها رو بررسی می‌کنه و اگر لازم باشه DOM رو update می‌کنه.

2️⃣ سوال: Angular چه زمانی Change Detection رو اجرا می‌کنه؟
پاسخ: Change Detection معمولاً در این حالت‌ها اجرا می‌شه:
• حالت ۱: User eventها (مثل click و input)
• حالت ۲: HTTP responseها
• حالت ۳: Timerها (مثل setTimeout و setInterval)
• حالت ۴: Promiseها و Observableها

⚠️ نکته: این جریان معمولاً با Zone.js مدیریت می‌شه.

3️⃣ سوال: Default Change Detection strategy چیه؟
پاسخ:
• مورد: Angular همه‌ی componentها رو در component tree بررسی می‌کنه‌ (در صورت استفاده از Zone.js)
• مورد: ساده و قابل‌فهمه، ولی توی اپ‌های بزرگ می‌تونه باعث مشکل performance بشه

4️⃣ سوال: OnPush Change Detection چیه؟
پاسخ: OnPush به Angular می‌گه فقط وقتی Change Detection رو اجرا کنه که:
• مورد: reference مربوط به input تغییر کنه
• مورد: داخل خود component یک event رخ بده
• مورد: یک observable با async pipe مقدار جدید emit کنه

📌 نتیجه: این کار معمولاً performance رو خیلی بهتر می‌کنه.

5️⃣ سوال: چه زمانی بهتره از OnPush استفاده کنیم؟
پاسخ:
• مورد: اپلیکیشن‌های بزرگ
• مورد: componentهایی که با immutable data کار می‌کنن
• مورد: componentهای reusable یا presentational

6️⃣ سوال رایجِ ادامه‌دار تو مصاحبه
👉 چرا با OnPush بعضی وقت‌ها UI update نمی‌شه؟
چون reference آبجکت تغییر نکرده - Angular به immutability تکیه می‌کنه.

📌 فهمیدن Change Detection یعنی تجربه‌ی واقعی Angular داری، نه فقط بلد بودن syntax.

➡️ ادامه: روز ۴ به‌زودی… (Directives - Structural vs Attribute) ⚡️🧠

#Angularinterview
@angularcafe

یادتونه وقتی میخواستیم یه input رو focus کنیم تو reactive form با viewChild اینکار رو میکردیم یا حتی از viewChildren یه خونه از آرایه شو میگرفتیم و focus میکردیم؟

حالا تو Signal form بهمون این قابلیت داده شده که یه فیلد از فرم رو با متد focusBoundControl بیایم focus کنیم 🤩

مثلا میتونیم بگیم اگه فلان فیلد پر شد برو فیلد بعدی یا حتی خطا هایی که میخوریم رو فیلد شو focus کن

protected nextInvalidField() {
    const nextInvalidField = this.form().errorSummary()[0];
    if (nextInvalidField) {
        nextInvalidField.fieldTree().focusBoundControl();
    }
}

اگه کار نکرد یه request animation frame میزنیم تا زمان اجرا رو بندازه به فریم بعدی

clearField(field: string | number): void {
this.formModel.update(fields => ({...fields, [field]: ''}))

requestAnimationFrame(() => {
this.form.someField().focusBoundControl();
});
}

#angularsignal
#signalform
@angularcafe

#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/