Angular 2 and Material Designs - Example Dialog is empty

Question

I'm trying to create a Dialog Box as shown in the Material Designs page Here. I can get the button to show up, click on it, the dialog box shows up and the page darkens as expected but no text shows up. I feel like I'm close but I can't figure out where I'm going wrong. Any help is appreciated, thanks!

Here is my code:

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

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

  constructor(public dialog: MdDialog) { }

  openDialog() {
    this.dialog.open(DialogOverviewExampleDialog);
  }

  ngOnInit() {
  }

}


@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {}

Answer 1

It looks like you may be missing a few things in your attempt.

First in your code, be sure to include the MdDialogRef in your DialogOverviewExampleDialog class constructor, like so, per the documentation:

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

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

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);

    // If you need a result from your dialog
    dialogRef.afterClosed().subscribe(result => {
      // Do something with result, if needed.
    });
  }
}


@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  // Added Constructor
  constructor(public dialogRef: MdDialogRef<DialogOverviewExampleDialog>) {}
}

Secondly, for the error:

No component factory found for DialogOverviewExampleDialog. Did you add it to @NgModule.entryComponents?

Your app.module.ts must define your dialog component (DialogOverviewExampleDialog) in two places: declarations and entryComponents.

For example:

@NgModule({
  declarations: [
    HomeComponent,
    DialogOverviewExampleDialog // HERE
  ],
  entryComponents: [ 
    DialogOverviewExampleDialog // AND HERE
  ],
  ...