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

در یک نگاه کلی:

مقایسه امکانات و api‌های قابل استفاده برای هرکدوم از ۳ قابلیت در انگولار

Frontend Burger

لایه‌های مختلف کار‌هایی که یک Frontend developer در پروژه هاش انجام میده میتونه شامل این موارد باشه.

#angularcafe

https://ui.ng.guide/ui

x.com/katsuba_igor

یکی از توسعه دهنده های انگولار یه wrapper برای material 3 زده که هم signal first هست هم zoneless

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

بدون css framework و سبک درست شده

#angularmaterial
#angularsignal
#angularcafe

با 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