خبر خوب اینکه تو 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

تجربه شخصیم:

با Apple gift card به اندازه پکیج Claude که میخواین خریداری کنید، حساب‌تون رو شارژ کنید

از VPN با IP ثابت استفاده کنید و ترجیحا آمریکا باشه
هر مقدار پکیج که میخواین خریداری کنید به اندازه ۱۰ درصد مالیات هم به کیف پول تون اضافه Gift card بزنید
20$ Claude +‌ 2$ Tax
125$ Claude +‌12.5$ Tax

چون من همون مقدار Claude رو شارژ کردم و موقع تکمیل کردن Transaction خطای Insufficient remaining credit میداد ولی نمیگه که چرا و باید Tax مثلا بخوره به Payment‌تون
پس حتما به اندازه Tax هم Gift card بریزید به حساب تون

سوال دیگه ای داشتید پیام بدید 👌🏾

#AI
#Claude
#angularcafe