2

I am trying to use <router-outlet></router-outlet> within an Angular Material popup dialog. However, the router-outlet part does not render anything, or log anything to the console.

If I add the <router-outlet></router-outlet> to the HTML content of the component that pops up the dialog(ContextBuyerPinComponent), then it works fine.

The routes look like this:

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

The dialog is opened via the ContextBuyerPinComponent like this: this.matDialog.open(ContextBuyerPinDialogComponent, this.config);.

And the ContextBuyerPinDialogComponent HTML is as follows:

<mat-toolbar color="primary" class="mat-elevation-z4">
  <app-tab [icon]="'room_service'" [displayType]="getDisplayType()" [caption]="'Local Services'"
    routerlink="demo/context-buyer-pin/services">
  </app-tab>
  <app-tab [icon]="'email'" [displayType]="getDisplayType()" [caption]="'Emails'"
    routerlink="demo/context-buyer-pin/emails">
  </app-tab>
  <app-tab [icon]="'map-pin'" [displayType]="getDisplayType()" [isSvg]="true" [caption]="'Pin Details'"
    routerlink="demo/context-buyer-pin/details">
  </app-tab>
</mat-toolbar>
<router-outlet></router-outlet>

I have tried using a named router-outlet as an alternative, but with no success.

The toolbar is using the app-tab component, and that is using the routerLinkActive directive which is working fine, so it looks like the routes are working.

How do I get this working?

mruanova
  • 6,351
  • 6
  • 37
  • 55
Mike Coxeter
  • 589
  • 1
  • 6
  • 18
  • The issue is illustrated here on stackblitz https://stackblitz.com/edit/angular-material2-issue-dehbgc – Mike Coxeter Apr 13 '19 at 04:33
  • A clue could be the need for me to add a guard in context-buyer-pin.component.ts line 18. Without this, it crashes the browser, evidently going into a loop. – Mike Coxeter Apr 13 '19 at 04:38

3 Answers3

5

I have solved the issue and it boiled down to the fact that the dialog window was showing the component that popped up the dialog window. So basically an infinite cycle caused by a routing setup issue.

I fixed the problem changing the path structure and using named outlet.

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      {
        path: 'context-pin',
        component: ContextPinComponent,
        children: [
          {
            path: 'buyer-pin',
            component: BuyerPinComponent
          }
        ]
      },
    ]
  },
  { path: 'services', outlet: 'popupContent', component: ContextPinServicesComponent },
  { path: 'emails', outlet: 'popupContent', component: ContextPinEmailsComponent },
  { path: 'details', outlet: 'popupContent', component: ContextPinDetailsComponent }
];

The stackblitz project with the issue.

The stackblitz project with the solution.

Mike Coxeter
  • 589
  • 1
  • 6
  • 18
0

Did u add the following to your code?

{
path: '',
redirectTo: '/',
pathMatch: 'full'

}

Shilpa Soni
  • 306
  • 3
  • 7
  • Thanks for the reply, but in this case it did not help. You can see the issue here: https://stackblitz.com/edit/angular-material2-issue-dehbgc – Mike Coxeter Apr 13 '19 at 04:40
-1

As per my understanding, I think this is happening due to router-outlet in entryComponent. If we make a CSS dialog box then we don't have any issue.

Rafay Jamal
  • 1
  • 1