can-match.guard.ts

// instead of this
@Component({
  template: `
    @switch (country.value()) {
      @case ('UK') {
        <app-uk-payroll/>
      }
      @case ('USA') {
        <app-usa-payroll/>
      }
      @case ('Canada') {
        <app-canada-payroll/>
      }
    }
  `,
})
export class ShellComponent {
  readonly #userService = inject(UserService);
  country = rxResource({
    loader: () => this.#userService.getCountryOfResidence(),
  });
}

// do this
export function matchCountryPayroll(country: string): CanMatchFn {
  return () => {
    const userService = inject(UserService);
    return userService.getCountryOfResidence().pipe(
      map((userCountry) => userCountry === country)
    );
  };
}

export const routes: Routes = [
  { 
    path: 'payroll', 
    canMatch: [matchCountryPayroll('UK')], 
    component: UKPayrollComponent
  },
  { 
    path: 'payroll', 
    canMatch: [matchCountryPayroll('USA')], 
    component: USAPayrollComponent 
  },
  { 
    path: 'payroll', 
    canMatch: [matchCountryPayroll('Canada')], 
    component: CanadaPayrollComponent
  },
];