ngrx/component-store this.select observable problem with suspenseTpl

[MattiaMalandrone]

Hi! is it possible that the selector observable this.select(({ ...}) => ...); of ngrx/component-store could not work with ngrxLet directive with the suspenseTpl?
I tried with an observable with the same type created with "of()" and it works well, in this example c is never shown
<ng-container *ngrxLet="hourly$ as hourly; error as e; complete as c"> {{ hourly }} <p *ngIf="e">There is an error: {{ e }}</p> <p *ngIf="c">Observable is completed.</p> </ng-container>

Thanks!

[markostanimirovic]

Hi @MattiaMalandrone,

is it possible that the selector observable this.select(({ ...}) => ...); of ngrx/component-store could not work with ngrxLet directive with the suspenseTpl?

Suspense template from ngrxLet can be used with observables that don't emit the first value synchronously (such as HttpClient.get result) to display the loading template until the observable emits the first value. In the case of ComponentStore whose state is initialized eagerly (via constructor), all observables created by this.select((s) => s.prop) will emit the first value (initial state) immediately, so suspense template will be never shown.

I tried with an observable with the same type created with "of()" and it works well, in this example c is never shown
<ng-container *ngrxLet="hourly$ as hourly; error as e; complete as c"> {{ hourly }} <p *ngIf="e">There is an error: {{ e }}</p> <p *ngIf="c">Observable is completed.</p> </ng-container>

State observables (this.select(...) result) will be "alive" during the ComponentStore lifecycle. That's the reason why they don't emit 'complete' event. On the other hand, observable created by using of(...) will emit passed value and then instantly complete.

[MattiaMalandrone]

first of all thanks a lot for the immediate response Marko!!! 🥇
and then thanks for the explanation! :)
So, I don't care about completion/error messages, but do you think I could use suspenseTpl if I init the state lazily? (https://ngrx.io/guide/component-store/initialization#lazy-initialization)

Thanks again!!!! really appreciate your works on ngrx!!!!! 👍 👍 👍

[markostanimirovic]

I'd not use lazy state initialization only to display the suspense template using the LetDirective. We can handle this scenario by using ComponentStore and LetDirective in the following way:

@Injectable()
class UsersStore extends ComponentStore<State> {
  private readonly users$ = this.select((s) => s.users);
  private readonly isLoading$ = this.select((s) => s.isLoading);

  readonly vm$ = this.select({
    users: this.users$,
    isLoading: this.isLoading$
  }, { debounce: true });

  /* ... */
}

@Component({
  standalone: true,
  imports: [LetDirective],
  template: `
    <ng-container *ngrxLet="vm$ as vm">
      <p *ngIf="vm.isLoading; else userList">Loading...</p>

      <ng-template #userList>
        <!-- ... -->
      </ng-template>
    </ng-container>
  `,
  providers: [UsersStore],
  /* ... */
})
export class UsersComponent {
  private readonly store = inject(UsersStore);
  readonly vm$ = this.store.vm$;
}

[markostanimirovic]

Btw, it's also possible to pass a dictionary of observables directly to the *ngrxLet directive:

@Component({
  standalone: true,
  imports: [LetDirective],
  template: `
    <ng-container *ngrxLet="{ isLoading: isLoading$, users: users$ } as vm">
      <p *ngIf="vm.isLoading; else userList">Loading...</p>

      <ng-template #userList>
        <!-- ... -->
      </ng-template>
    </ng-container>
  `,
  providers: [UsersStore],
  /* ... */
})
export class UsersComponent {
  private readonly store = inject(UsersStore);
  readonly users$ = this.store.users$;
  readonly isLoading$ = this.store.isLoading$;
}

[MattiaMalandrone]

Oh thanks for the suggestioni marko!!!! Inviato da Outlook per Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Marko Stanimirović ***@***.***> Sent: Friday, August 18, 2023 6:11:03 PM To: ngrx/platform ***@***.***> Cc: Mattia Malandrone ***@***.***>; Mention ***@***.***> Subject: Re: [ngrx/platform] ngrx/component-store this.select observable problem with suspenseTpl (Discussion #4009) **ATTENZIONE**: Questo messaggio proviene da un ACCOUNT ESTERNO, presta attenzione ad eventuali link o allegati al suo interno. Btw, it's also possible to pass a dictionary of observables directly to the *ngrxLet directive: @component({ standalone: true, imports: [LetDirective], template: ` <ng-container *ngrxLet="{ isLoading: isLoading$, users: users$ } as vm"> <p *ngIf="vm.isLoading; else userList">Loading...</p> <ng-template #userList> <!-- ... --> </ng-template> </ng-container> `, providers: [UsersStore], /* ... */ }) export class UsersComponent { private readonly store = inject(UsersStore); readonly users$ = this.store.users$; readonly isLoading$ = this.store.isLoading$; } — Reply to this email directly, view it on GitHub<#4009 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACMXIG4E3HC2PB5TLRPJ4T3XV6HZPANCNFSM6AAAAAA3STXV6Y>. You are receiving this because you were mentioned.Message ID: ***@***.***>