CODEWITHSUNDEEP
angulartypescript
ChinnaR
ChinnaR

Reputation: 837

angular dialog open is not working

I have just started learning Angular 5 and I just need to open a dialog box on a button click. Application is unable to build and the error I am coming up is 'error ts2339 property dialog does not exist on type Dashboardcomponent' I have then installed angular material and cdk. It's still coming up with the same error when compiling. And the on the html page(localhost:4200), the error I am getting is 'Cannot read property 'open' of undefined'. How can I get the dialog and open working on angular?

typscript:

import { Component, OnInit } from '@angular/core';
import { WebapiService } from '../providers/webapi.service';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private webApi: WebapiService) { }

  ngOnInit() {
  }

  openServerDialog() {

    const serverDialogRef = this.dialog.open(ServerDialogComponent, {
      width: '250px',
      data: { serverlist: this.webApi.getServerList() }
    });
  }
}

html:

<div class="main-content">
  <div class="container-fluid">
    <button mat-fab color="warning" (click)="openServerDialog()">open</button>
  </div>
</div>

Upvotes: 5

Views: 28427

Answers (3)

A. Lezmann
A. Lezmann

Reputation: 1

Error: Cannot read property 'open' of undefined:

Your compiler should say that the modal is missing a provider (sometimes you have to restart the compiler to get the error message).

Either way, you should look into your module. You need to register your components. You probably just copied a similar file and renamed the names.

Afterwards mine worked. See the green changes to pinpoint what I added to my module:

Typescript code in an VS Code editor. An Angular NgModule is declared and two providers have been added: "AbsencePrintOption" and "AbsencePrintOptionService". Imports for both items have been added to the file as well as an import for "AbsencePrintDialogComponent" which appears in the "entryComponents" section of the NgModule declaration.

Upvotes: 0

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

First import MatDialogModule in AppModule

import {MatDialogModule} from '@angular/material/dialog';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTml File 

<button mat-raised-button (click)="openServerDialog()">Pick one</button>

TS file

import { WebapiService } from '../providers/webapi.service';
import {Component, Inject,OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(public dialog: MatDialog,private webApi: WebapiService) { }

  ngOnInit() {
  }

  openServerDialog() {

    let serverDialogRef = this.dialog.open(ServerDialogComponent, {
      width: '250px',
      data: { serverlist: this.webApi.getServerList() }
    });
  }
}

ServerDialogComponent ts file 

@Component({
  selector: 'server_dialog_component ',
  templateUrl: 'server_dialog_component.html',
})
export class ServerDialogComponent {

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

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

}

Upvotes: 2

pzaenger
pzaenger

Reputation: 11973

You need to create a dialog within your constructor, without this.dialog.open(...) results in Cannot read property 'open' of undefined:

constructor(public dialog: MatDialog, private webApi: WebapiService) {
}

Upvotes: 8

Related Questions