Angular 2 and Material Designs - Example Dialog is empty
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 ], ...