Open Dialog not working, Material Angular 6

1
votes

My .open() on my Material Dialog is not working in Angular 6. The error I receive is:

ERROR TypeError: Cannot read property 'open' of undefined

What might be going wrong? It seems as if the import of MatDialog is not being recognized

Parent Component:

import { Component, OnInit, Input, Inject } from '@angular/core';
import { AuthService } from "../../services/auth.service";
import { SiteService } from "../../services/site.service";
import { MonitoringPointService } from "../../services/monitoring-point.service";
import { Router, ActivatedRoute } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { DialogComponent } from '../dialog/dialog.component';

@Component({
  selector: 'app-site-settings',
  templateUrl: './site-settings.component.html',
  styleUrls: ['./site-settings.component.css']})

  export class SiteSettingsComponent implements OnInit {

  constructor(public dialog: MatDialog, private router: Router, private route: ActivatedRoute, public authService: AuthService, public siteService: SiteService,public monitoringPointService: MonitoringPointService ) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
    });
  dialogRef.afterClosed().subscribe(result => {
     console.log('The dialog was closed');
    });
  }
  ngOnInit() {
   ...
  }
}

Dialog Component:

import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { SiteSettingsComponent } from '../site-settings/site-settings.component';


@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})

export class DialogComponent implements OnInit {

  constructor(  public dialogRef: MatDialogRef<DialogComponent>) { }

  ngOnInit() {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}
3
angulardialogangular-material
did you import the matdialog globally and did you add it as an entrycomponent? - jcuypers
Probably not, does that mean listing it under Bootstrap in app.module? I receive an error saying that can't be done - LaurenAH
I was just reviewing another topic with similar requirement. I reuse kindly the code. stackblitz.com/edit/angular-material-dialog-so55110692 - jcuypers
@LaurenAH If the problem still exist then request you to share the stackblitz - Prashant Pimpale
@jcuypers Thanks a lot- I replicated this env ( as well as added the mat dialog css to my index file) and it worked - LaurenAH

3 Answers

1
votes

You need to add MatDialogModule to the imports array in your module.ts, and CourseDialogComponent in entry component and declaration array, example:

import {MatDialogModule} from "@angular/material";
@NgModule({
declarations: [
 ...
 CourseDialogComponent
],
imports: [
 ...
 MatDialogModule
],
providers: [
 ...
],
bootstrap: [AppComponent],
entryComponents: [CourseDialogComponent]
})

export class AppModule {
}
1
votes

We need to import our Dialog component in 2 places of the App module

  1. declarations
  2. entryComponents

After that no need to give selector in the Dialog Component, see the below example.

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
    templateUrl: 'dialog.template.html',
})
export class DialogComponent {

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}
0
votes

did you import the matdialog globally and did you add it as an entrycomponent?