با stable شدن API های Resource و httpResource برای مدیریت request‌ها، loading state و error state ها، برای component‌ها و service‌ها خیلی کاربردی شده.

ولی این API های جدید برای Router Guard و Resolver ها مناسب نیستن!

حالا چرا؟

چون ذاتا Guard‌ها و Resolver‌ها تا مشخص شدن نتیجه شون Navigation رو متوقف میکنن، یعنی باید منتظر یه نتیجه ای مثل Boolean، Promise یا Observable بمونن.

ولی Resource‌ها ذاتا Reactive هستن و وقتی داخل Resolver و یا Guard ازشون استفاده کنیم مقدار اولیه value شون معمولا undefined هست و request در وضعیت loading قرار داره و ما اگه همون لحظه بخوایم value شون رو استفاده کنیم اون Guard ممکنه سریعا مقدار false رو برگردونه و Navigation رو Cancel کنه حتی قبل از اینکه API اصلا جواب رو برگردونه!

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  // This returns the signal's current value synchronously
  // Which is `undefined` initially!
  return authResource.value() ?? false;
};

حالا راه درست چیه؟

برای Guard و Resolver فعلا همچنان از HttpClient و Observable یا Promise استفاده میکنیم که بشه از Async بودن شون این بهره رو برد تا جواب حاصل نشده، نتیجه ای برگردونده نشه قبل از Navigation کامل.

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  // An Observable cleanly blocks the Router until it completes or emits
  return http.get<boolean>('/api/auth/status');
};

پس برای جمع‌بندی در حال حاضر Resource و httpResource برای UI و Reactive Data عالی هستن، اما برای Guard و Resolver درست هست که از همون روش‌های فعلی Observable و Promise استفاده کنیم.

در واقع Resource برای Data binding استفاده بشه و Observable و Promise برای Control flow در Routing پروژه.

#angularsignal
#angularcafe

خبر خوب اینکه تو Dialog در Angular Material 22 قابلیت input binding اضافه شده.

یعنی چی؟

قبلا برای پاس دادن مقادیری به Mat Dialog باید data رو پر میکردیم و داخل Component مورد نظر با inject کردن MAT_DIALOG_DATA اونو میگرفتید و استفاده میکردیم

حالا برای اینکه بتونیم از input و output و two-way binding استفاده کنیم قابلیت binding اضافه شده و میشه عین یه component که داخل html مینویسیم و بهش input و output پاس میدیم با component پاس داده شده به Dialog هم همون مدلی برخورد کنیم:

برای مثال:

code:

protected openSettingsDialog() {
  this.dialog.open(NotificationSettingsComponent, {
    width: '28rem',
    panelClass: 'settings-dialog',
    data: {user: this.user()}
  });
}

و با گرفتن MAT_DIALOG_DATA اون دیتا رو استفاده میکردیم.

حالا با قابلیت binding میتونیم همچین چیزی انتظار داشته باشیم:

code:

<app-notification-settings
  [user]="user()"
  [(enabled)]="notificationsEnabled"
  (saved)="saveNotificationSettings($event)"
/>

حالا چطوری؟

code:

protected openSettingsDialog() {
  this.dialog.open(NotificationSettingsComponent, {
    width: '28rem',
    panelClass: 'settings-dialog',
    bindings: [
      inputBinding('user', this.user),
      outputBinding<NotificationSettingsSaved>('saved', settings => {
        this.saveNotificationSettings(settings);
      }),
      twoWayBinding('enabled', this.notificationsEnabled),
    ],
  });
}

داخل component ای هم که داخل Dialog مد نظر داریم مثل حالت عادی signal input و outout و two-way رو استفاده میکنیم:

code:

export class NotificationSettingsComponent {
  readonly user = input<User | null>(null);
  readonly enabled = model(false);
  readonly saved = output<NotificationSettingsSaved>();
  protected save() {
    if (this.user()) {
      this.saved.emit({
        userId: this.user()!.id,
        enabled: this.enabled(),
      });
    }
  }
}

منبع

#angularsignal
#angularcafe

انگولار رو به روش صحیح به‌روزرسانی کنیم! 🚀

#angulartips
#angularcafe

تبدیل RXJS به Signal:

الگوها، مشکلات و نکات کاربردی

۱. مهاجرت‌های خودکار

ng generate @angular/core:signal-input-migration

ng generate @angular/core:output-migration

ng generate @angular/core:signal-queries-migration

۲. برای تبدیل Observableها از bridge مربوطه یعنی toSignal() استفاده کنید.

// Before
data$ = this.http.get(this.API_URL);
// Converting to Signal
data = toSignal(this.data$);

نمونه بالا مقدار اولیه رو undefined ست میکنه که میشه مثل نمونه زیر با initialValue مقداردهی اولیه کرد signal مون رو:

// Without default value
rates: Signal<Rates | undefined> = toSignal(this.rates$);
// With default value
rates: Signal<Rates> = toSignal(this.rates$, 
                               {initialValue: {USD: 1, EUR: 1, GBP: 1}}
);

۳. تبدیل Subject‌ها به Signal:

// Subject version
currentCurrency = new BehaviorSubject<CurrencySymbol>(DEFAULT_CURRENCIES[0]);
// Signal version
currentCurrency = signal<CurrencySymbol>(DEFAULT_CURRENCIES[0]);

۴. جایگزین RXJS Operator‌ها با Computed:

// RxJs code
currentExchangeRate$ = combineLatest([
    this.exchangeRates$,
    this.currentCurrency$
  ]).pipe(
    map(([rates, current]) => rates[current.code as keyof ExchangeRates])
  );

// Equivalent Signal based version
currentExchangeRate = computed(
    () => this.exchangeRates()[this.currentCurrency().code]
 );

بعضی موقع‌ها، می‌خوایم بخشی از منطق RXJS رو نگه داریم چون خوب کار می‌کنه و از یه سری ویژگی‌هایی که معادل مستقیم مبتنی بر سیگنال ندارن مثل نمونه زیر که timer هست استفاده کنیم. تو این حالت، toSignal باز هم میتونه به عنوان یه Bridge عمل کنه و کل عملیات RX مون رو به signal تبدیل کنه:

// RxJs code
exchangeRates$: Observable<ExchangeRates> = timer(0, 3600000)
  .pipe(
    switchMap(() => this.http.get<any>(this.API_URL)),
    map(data => ({
      USD: 1,
      EUR: data.rates.EUR,
      GBP: data.rates.GBP
    }))
  );

// Simple Signal conversion with toSignal()
exchangeRates = toSignal(this.exchangeRates$);

نتیجه‌گیری به نظرم اینه که با جفت ویژگی ها تو صلح باشیم و از هرکدوم تو جای خودش استفاده کنیم و اگه از RXJS استفاده میکنیم از Memory leak جلوگیری کنیم و ازش اجتناب کنیم و البته که استفاده غیراصولی از Signal هم میتونه side effect‌های Memory leak داشته باشه ولی مدیریتش راحت‌تر از RX هست و همچنین لذت استفاده از signal به نظرم، باعث جلوگیری از استفاده چندین operator و کم کردن تعداد boilerplate‌های زیادی که قبلا مینوشتیم رو به ارمغان میاره برامون.

#angularsignal
#angularcafe

https://orbs.jakubantalik.com/

برای بخش های AI دار پروژه تون ازینا بذارین خیلی باحاله

مقداری در این مورد مطالعه کنید به مرور بیشتر در موردش صحبت میشه خیلی خوبه و جالبه

نمونه طرح های زده شده براش:

https://canvasui.dev/

برای مدیریت Monorepo‌ها یه روش مرسوم NX هست که هنوزم خیلی فراگیر نشده بازم ولی یه Turborepo هم هست که شاید کمتر شنیده شده باشه که سرعت خیلی بالاتری نسبت به NX داره

اگه تجربه هرکدوم رو دارید باهامون به اشتراک بذارید

https://github.com/vercel/turborepo

https://github.com/nrwl/nx

#monorepo
#angularcafe

اگه از Angular SSR نسخه +۲۰ استفاده میکنید حتما patch امنیتی جدید رو دریافت کنید

ریسک این باگ امنیتی High هست

دستور آپدیت پج در نسخه ۲۲

ng update @angular/core@22.0.7 @angular/cli@22.0.7

#angularssr
#angularcafe

https://uisfx.com/

یه کتابخانه کوچک و کامل پر از افکت‌های صوتی رابط کاربری برای interactive کردن UI تون که خیلی مدرن و باحال میکنه کارو

#angularcafe

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

@omidkhosrojerdi

omidkh68@gmail.com


#استخدام

CSS Variable Namespacing - #68846

چه PR جذابی 🤩

https://github.com/angular/angular/pull/68846?_sc=NTk5NDc4NyMxMDM5NA%3D%3D

#angularcafe

https://namethatui.com/

اگه اسم یک سری Element‌های مورد استفاده در روزمره‌ تو کار‌هامون رو نمیدونین یا میخواستین دنبال یه آیتمی بگردین که اسم اش رو یادتون رفته این سایت میتونه گوشه ذهنتون باشه که هر کدوم از element‌ها اسم شون چیه و کاربرد‌شون چیه

#designtools
#angularcafe

بیایید از تیریک هایی که باعث بشه اکانت Claude تون بن نشه
بگید بقیه هم یاد بگیرن 👌

https://www.getlayers.ai/

یه سایت خفن که prompt های آماده فوق عجیب میده ولی پولی 🤒
ولی ایده هایش قشنگ هست میشه ایده ها رو بدی به AI و تا حدودی همون شکل پیاده‌ش کنه

#AI
#angularcafe