How to use an Angular Route Title Resolver to wait on an observable?

I have an Angular 19 app and I am trying to add a route title resolver that gets the page title by looking up some data in the results of an Observable.

The issue is that when the app first loads, the customersList$ contains an empty array, and thus the title resolves to an empty string.

export const customerTitleResolver: ResolveFn<string> = (route) => {
const timesheetSelectionService = inject(TimesheetSelectionService);

const customerNumParam = route.paramMap.get('custNum') ?? '';
return timesheetSelectionService.customersList$.pipe(
map((list) => list.find((cust) => cust.id === customerNumParam)?.description ?? ''),
);
};


The service has a loading boolean observable which I tried to hook into, but it just caused the page not to load. It seems that resolves just fire an observable once, and don't really "live subscribe" like I would have hoped.

export const customerTitleResolver: ResolveFn<string> = (route) => {
const timesheetSelectionService = inject(TimesheetSelectionService);

const customerNumParam = route.paramMap.get('custNum') ?? '';
return timesheetSelectionService.isLoading$.pipe(
filter((isLoading) => !isLoading),
switchMap(() => timesheetSelectionService.customersList$),
map((list) => list.find((cust) => cust.id === customerNumParam)?.description ?? ''),
);
};


How can I get the resolver to wait for data to be loaded before attempting to look up the value in the observable array?

Continue reading...