I’m facing an issue, I have an angular 14 application which when loads displays the modal popup with route http://localhost:4200/select-role
app.routing.module.ts
{ path:'select-role', component: SwitchRoleDialogComponent, canActivate: [AuthGuard] }
Its just an popup with list of roles and radio buttons so user selects one click proceed and lands on landing page with route http://localhost:4200/home. I call this popup in my AppComponent.
Now, I’ve a scenario where from the email link when I click, I need to go to some particular route and suppress this popup.
email link – http://localhost:4200/wf/review/152,
hence, to handle email route path this I’ve created an LoadingIncomingAppComponent
{ path: 'wf/review/:id', component: LoadingIncomingAppComponent},
LoadingIncomingAppComponent
this.route.paramMap.subscribe(params => {
this.id= +params.get('id');
if (this.id) {
this.someSvc.currentId= this.id;
this.router.navigate(['/review']) //navigate to my destination;
}
})
With this changes i land to the destination but with overlay, how can i suppress SwitchRoleDialogComponent popup triggered from AppComponent when I navigate from email else it should display as it does?
>Solution :
When you load LoadingIncomingAppComponent on the ngOnInit() emit an event using Subject or BehaviourSubject on a common service, then subscribe to that subject emissions on the app component and close that popup manually, if its possible to close it directly use that!
You can also flag certian routes into an array like this.ignoreTheseRoutes = ['wf/review'] and prevent the popup being open when the route belongs to these routes like so
// below line check if the router url matches any
// of the flagged routes where the popup need not open!
if(!this.ignoreTheseRoutes.some((path: string) => this.router.url.includes(path))) {
// open the popup!
}