https://www.angular.courses/caniuse/features

این سایت کمک میکنه بهمون که هر کدوم از feature هایی که تو نسخه های مختلف Angular میاد چه وضعیتی دارن از لحاظ Stability و مورد استفاده بودنش رو مشخص میکنه

#angularfeatures
#angular
@angularcafe

یه بار برای همیشه با کدهای اضافی موقع submit فرم توی Angular Signal Forms خداحافظی کنیم

قابلیت signal form که اضافه شد خیلی خفن و قوی بود مثل مدل قبلی نبود که درگیر ماژول و چیزای دیگه بشیم ولی هنوز خوب پخته نشده بود و یه سری کارا رو باید دستی مدیریت میکردیم مثل novalidate کردن برای غیر فعال کردن validation دستی خود browser ها
یا جلوگیری از reload شدن صفحه با (submit)
حالا تو نسخه بعدی که قراره نسخه 21.2 باشه یه directive اضافه دارن میکنن که به خود form اضافه میشه

<form [formRoot]="loginForm">

این Directive هم خودش از novalidate پشتیبانی میکنه و جلوی اعتبار سنجی پیشفرض مرورگر رو میگیره
هم جلوی reload شدن صفحه رو میگیره
هم submit رو هندل میکنه

البته این قابلیت فعلا بصورت Experimental اضافه میشه تا تثبیت بشه و به برنچ اصلی مرج بشه

لینک commit:

https://github.com/angular/angular/commit/ba009b6031

#signalform
#angularsignal
#angular
@angularcafe

تایم لاین تغییرات و ویژگی های هر نسخه در انگولار

#angularevolution
#angular
@angularcafe

یه اینفوگرافی از Lifecycle های انگولار و ترتیب اجرا شدن هر کدوم شون

hookهای مهمی که هر برنامه‌نویس Angular باید مسلط باشه

* ngOnChanges() : وقتی مقدارهای @Input عوض میشن، اینجا می‌تونی واکنش نشون بدی

* ngOnInit() : جای درست برای راه‌اندازی منطق اولیه‌ی کامپوننت

* ngDoCheck() : برای وقتی که می‌خوای Change Detection سفارشی/خاص خودت رو پیاده کنی

* ngAfterViewInit() : بهترین و امن‌ترین زمان برای دسترسی به @ViewChild

* ngOnDestroy() : برای جمع‌کردن همه‌چی و جلوگیری از memory leak

چرا lifecycle hookها مهمن؟

چون باعث میشن:

* performance بهتر بشه
* معماری تمیزتر و قابل‌مدیریت‌تر داشته باشی
* memory leak اتفاق نیفته

#angular
@angularcafe

‏یه خبر جذاب برای دنیای Angular! از نسخه 21.2 به بعد، وقتی با CLI یه پروژه جدید می‌سازی، Prettier به‌صورت پیش‌فرض formatter پروژه‌ست.
‏
‏یعنی چی؟ یعنی ng new از همون اول یه workspace بهت می‌ده که همه‌چی برای یه فرمت‌دهی یکدست و استاندارد از قبل تنظیم شده بدون اینکه تو هیچی ستاپ کنی یا دنبال config بگردی.
من تو یه پروژه nx اومدم prettier رو ستاپ کنم خیلی دردسر کشیدم تا با IDE ام یکسان شد

#prettier
#angular
@angularcafe

اگه خواستید یک current route رو مقایسه کنید به صورت signal based دیگه به جای استفاده از router.isActive از signal based function به عنوان isActive که از پکیج @angular/router هست استفاده کنیم

<div> {{ isProfileActive() }} </div>

روش قدیم و deperacated شده:

‍‍
this.#router.isActive('/user/profile', {
  paths: 'exact',
  queryParams: 'ignored'
});

// Signal-based

readonly isProfileActive = isActive(
  '/user/prifile',
  this.#router,
  {
    paths: 'exact',
    queryParams: 'ignored'
  }
);

#angularsignal
#angular
@angularcafe

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