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 {}
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
],
...