angular 2 mdDialog not overlaying

Question

i am trying to do the mdDidalog in angular2, but its show me like this :

Something is going wrong... i import next:

import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';

Constructor:

  constructor(
      public dialog: MdDialog,
      public viewContainerRef: ViewContainerRef
    ){}

its function calling new modal:

  public openAddPromoModal() {
const config = new MdDialogConfig();
config.viewContainerRef = this.viewContainerRef;

const dialogRef = this.dialog.open(AddNewCandidat, {
  height: '400px',
  width: '600px'})

dialogRef.afterClosed().subscribe(newPromo => {
    });
  }
}

Its my index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

This seems like an css issue not an Angular issue. – Swoox Sep 22 '17 at 09:14 — Swoox, Sep 22 '17 at 09:14

score 0 · Answer 1 · answered Sep 22 '17 at 09:36

0

Your function should be like

public openAddPromoModal() {
    const config = new MdDialogConfig();
    config.width = '600px';
    config.height: '400px';

const dialogRef = this.dialog.open(AddNewCandidat, config);

dialogRef.afterClosed().subscribe(newPromo => {
    });
  }
}

answered Sep 22 '17 at 09:36

Shailesh Ladumor

7,052
5
42
55

see example. may be help https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts – Shailesh Ladumor Sep 22 '17 at 09:42
https://stackoverflow.com/questions/34205593/working-example-of-angular-2-0-material-mddialog-with-angular-2-0 – Shailesh Ladumor Sep 22 '17 at 09:42
its not error, i mean its show me like on the pic i attached in head – shoopik Sep 22 '17 at 09:50

angular 2 mdDialog not overlaying

1 Answers1