CODEWITHSUNDEEP
angularmddialog
Brett L
Brett L

Reputation: 105

Angular4 MdDialog appears but no html is displayed inside

I'm not sure why the html inside of my dialog isn't displayed

Here are my app and dialog components. All of the imports seem to be working correctly, and I'm not getting any error messages in the browser console. 

import { Component, Input } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  dialogRef : MdDialogRef<Dialog>;
  title = 'Code Share app';
  admin = false;
  userID : string = "";

  constructor(public dialog: MdDialog ){
    this.openDialog();
  }

  openDialog() {
  this.dialogRef = this.dialog.open(Dialog);
  this.dialogRef.afterClosed().subscribe(result => {
    console.log(result);
    this.dialogRef = null;
  });
 }

}


@Component({
  selector: 'dialog',
  template: `<h1>Dialog</h1>
  <div md-dialog-content>What would you like to do?</div>
  <div md-dialog-actions>
    <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
    <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
  </div>
  <p>hello</p>`,
})

export class Dialog {
  constructor(public dialogRef: MdDialogRef<Dialog>){}
}

Upvotes: 0

Views: 95

Answers (1)

Brett L
Brett L

Reputation: 105

It turns out that the HTML selector "dialog" was in a namespace conflict with a selector from one of the libraries I'm using. I changed the name and it worked.

Upvotes: 1

Related Questions