How to wait for the return of an RxMethod using NgRx SignalStore?

export class AssetsComponent implements OnInit {
private readonly _customerApp = inject(UserApplication);
private readonly _sanitizer = inject(DomSanitizer);

isLinxoId$$ = this._customerApp.isLinxoId;

isWidgetLink$$ = this._customerApp.widgetBankLinks;
isWidget$$ = this._customerApp.isWidget;

sanitizedWidgetLink: any;
showIframe: boolean = false;

ngOnInit(): void {
if (!this.isLinxoId$$()) this._customerApp.createBankUser();
}

addBank() {
this._customerApp.getBankWidget();
this.sanitizedWidgetLink = this._sanitizer.bypassSecurityTrustResourceUrl(
this.isWidgetLink$$()?._links?.add_connection as string
);
}
}


In the addBank() method, I call getBankWidget() to fetch the necessary data, then use bypassSecurityTrustResourceUrl to secure the link returned by isWidgetLink$$. However, it's possible that getBankWidget() hasn't finished executing by the time I try to access isWidgetLink$$, which could result in sanitizedWidgetLink being null. How can I ensure that bypassSecurityTrustResourceUrl is only executed once getBankWidget() has completed and isWidgetLink$$ contains a value?

export class UserApplication {
private readonly store = inject(CustomerStore);


getBankWidget() {
this.store.getBankWidget();
}
get isLinxoId(): Signal<boolean | null> {
return this.store.isLinxoId;
}

get isWidget(): Signal<boolean | null> {
return this.store.isWidget;
}

get customer(): Signal<Customer | null> {
return this.store.customer;
}
get widgetBankLinks(): Signal<WidgetBankLinks | undefined> {
return this.store.widgetBankLinks;
}

}


SignalStore :

export const CustomerStore = signalStore(
{ providedIn: 'root' },
withState(initialValue),
withComputed((store) => ({
isLoggedIn: computed(() => store.customer() != null),
isLinxoId: computed(() => store.customer().bank.linxoId != null),
isWidget: computed(() => store.widgetBankLinks()?.session_id != null),
})),
withMethods(
(
store,
infra = inject(UserInfrastructure),
router = inject(Router),
toastService = inject(ToasterComponent)
) => ({
getBankWidget: rxMethod<void>(
pipe(
tap(() => patchState(store, { isLoading: true })),
concatMap(() => {
return infra.getBankWidget().pipe(
tapResponse({
next: (response) => {
console.log('create widget User');
patchState(store, {
widgetBankLinks: response,
isLoading: false,
});
toastService.info('Success');
},
error: () => {
console.log('create widget fail');
patchState(store, { isLoading: false });
toastService.warning('Erreur de création');
},
})
);
})
)
),
})
)
);

Continue reading...