I am using Angular and I depending of an asynchronous function (foo(): Promise<boolean>) I want to show either component Foo or Bar.
What would be the best approach for this? I don't think route guards are the best fit for my requirement.
Well, it depends where you are executing foo() function. Generally yes, you can do it with Route Guards, but you can also do it in TypeScript file of the Component where the foo() function is executed.
import { Router } from '@angular/router';
...
constructor(private router: Router) { }
...
navigateToComponent = async () => {
try{
result = await foo();
if(result == 'Foo') this.router.navigate(['/Foo']);
if(result == 'Bar') this.router.navigate(['/Bar']);
} catch(error) {
console.log('ERROR: ', error);
}
}