To open/display an Angular 5 route in a Material 2 dialog component, you can use the Angular MatDialog service to create a dialog and load your route component inside it. Here's how you can achieve this:

  1. Set up the Angular Route: First, create a new route in your Angular routing module that corresponds to the component you want to display in the dialog. For example, in app-routing.module.ts:

    import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // Import the component you want to display in the dialog import { DialogComponent } from './dialog/dialog.component'; const routes: Routes = [ { path: 'dialog-component', component: DialogComponent }, // Other routes... ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
  2. Create the Dialog Component: Create a new Angular component for the dialog. This component will use the MatDialogRef service to close the dialog when needed. For example, in dialog/dialog.component.ts:

    import { Component, OnInit } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', styleUrls: ['./dialog.component.css'] }) export class DialogComponent implements OnInit { constructor(private dialogRef: MatDialogRef<DialogComponent>) { } ngOnInit(): void { } onClose(): void { this.dialogRef.close(); } }
  3. Open the Dialog from Your Main Component: In the component from where you want to open the dialog (e.g., your main component), inject the MatDialog service and use it to open the dialog and display the route component. For example:

    import { Component } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { DialogComponent } from './dialog/dialog.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private dialog: MatDialog) { } openDialog(): void { const dialogRef =, { width: '400px', height: '300px', }); // You can subscribe to the dialog's afterClosed event to perform any action after the dialog is closed. dialogRef.afterClosed().subscribe(result => { console.log('Dialog closed'); }); } }
  4. Display the Route Component Inside the Dialog: In dialog.component.html, you can use the Angular router-outlet to display the route component inside the dialog:

  5. Trigger the Dialog: Finally, you can trigger the dialog from your main component (or wherever you want) by calling the openDialog() method:

    <button mat-button (click)="openDialog()">Open Dialog</button>

Now, when you click the "Open Dialog" button, it will open the Material dialog, and the specified route component (in this case, DialogComponent) will be displayed inside the dialog. You can customize the dialog's appearance and behavior by adjusting the options provided when calling

Make sure you have imported and configured the necessary Angular Material modules in your app.module.ts file and included the MatDialogModule in the imports array.

Have questions or queries?
Get in Touch