CODEWITHSUNDEEP
angulartypescriptdialog
Unbreachable
Unbreachable

Reputation: 744

How do I make a dialog pop up in angular without redirecting to another component/page?

So far I already have a working dialog from angular/material(https://material.angular.io/components/dialog/overview) and it works well, but what I am trying to do is prevent the client from going to another page when they click on the link or search in the URL '/messages'. For example, if I am on the home page "/home" and if the client searches in URL "/messages" while on the home page, I want the dialog to pop up but stay on the home page. The same thing for the link, if I am on the "/about" page and click a link that navigates to the "/messages" page, I want to stay on the "/about" page while the dialog is outputted to the browser.

Upvotes: 1

Views: 7476

Answers (2)

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

Complete working example you can find here in this StackBlitz Link

You can use guard service for protecting routing path. create route guard and put code like this..

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

   if (this.guardSerive.open()) {
     return true;
   }else{
     this._router.navigate(['/Home']);
   }
}

In your service you have one method call in guard service like this...

open(){
   let result = window.confirm('Are you sure want to move?')
   return result;
}

Your Routing path in app-routing.module.ts is...

  RouterModule.forRoot([
     {path:'Home', component: ExampleComponent},
     {path: 'generate', component:GenerateComponent,
     canActivate: [HnResolver]},
     {path:'', redirectTo: 'Home', pathMatch: 'full'}
  ])

Upvotes: 2

Himanshu Singh
Himanshu Singh

Reputation: 2165

The type of behaviour you want can be achieved using Route guard. Based on your response from Route guard you can show the pop up containing relevant message.

Note: adding working code...

Upvotes: 0

Related Questions