0

I had a Angular Material Dialog.Code snippet for the invoker: In the template:

<ag-grid-angular 
              ...
              (cellClicked)='onGridCellClicked($event)'>
</ag-grid-angular>

In the component:

onGridCellClicked(event) {
   if (event.colDef.field == 'name') {
      this.showSurveyDetails(event.data);
    }
  }
  showSurveyDetails(data) {
    const dialogData = data;       
    this.dialog.open(SurveyDetailsDialogComponent, { width: '80vw', data: dialogData });
  }

Here dialog is a MatDialog. Now to turn it into a regular component I am replacing the code this.dialog.open with

this.router.navigate(['getSurveySummary',{dialogData:dialogData}]);

where router is ActivatedRoute. Now the problem is it is not finding the route. The route is defined in app.routing.ts as:

{ path: SurveyRoutes.SURVEY_SUMMARY, component: SurveyDetailsDialogComponent, canActivate: [ValidateLogin] }

SURVEY_SUMMARY is defined in app.routing.constants.ts as:

SURVEY_SUMMARY = 'getSurveySummary'

The error message is:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'getSurveySummary;dialogData=%5Bobject%20Object%5D'

Error: Cannot match any routes. URL Segment: 'getSurveySummary;dialogData=%5Bobject%20Object%5D' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (vendor.js:132813)

It would have been another matter if it failed in dialog box, but it is failing in routing itself. How to define the route so that flow is successful?

Subhendu Mahanta
  • 961
  • 1
  • 18
  • 44
  • Can you explain why you want to change Dialog to Page because they are sorely different context. Dialog component is using different technique with some Angular Component, they use Reference Component to call a popup. So you can't pass the data via Route to open Dialog. – Johnathan Le Jun 24 '20 at 04:57
  • @Johathan, we have received requirement from our UI design team to such effect. I do not want to open a dialog. I want to open a page - a regular component. I want to navigate from one component to another component. – Subhendu Mahanta Jun 24 '20 at 05:48
  • So you should create a component as Page which can be navigated to. You can keep all your logic that you had on Dialog Component but the data must be gotten via Navigate. This is great explanation about passing data from page to page https://stackoverflow.com/questions/44864303/send-data-through-routing-paths-in-angular – Johnathan Le Jun 24 '20 at 05:54
  • @Jonathan, actually my url was wrong. I prepended #/survey to the url & the problem got solved. But the link you provided is very useful. Thanks a lot. – Subhendu Mahanta Jun 24 '20 at 10:10

0 Answers0