Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions src/material/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,37 @@ export class YourDialog {
}
```

### Configuring dialog content via `entryComponents`

Because `MatDialog` instantiates components at run-time, the Angular compiler needs extra
information to create the necessary `ComponentFactory` for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of
`entryComponents` in your NgModule definition so that the Angular compiler knows to create
the `ComponentFactory` for it.

```ts
@NgModule({
imports: [
// ...
MatDialogModule
],

declarations: [
AppComponent,
ExampleDialogComponent
],

entryComponents: [
ExampleDialogComponent
],

providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```

### Specifying global configuration defaults
Default dialog options can be specified by providing an instance of `MatDialogConfig` for
MAT_DIALOG_DEFAULT_OPTIONS in your application's root module.
Expand Down Expand Up @@ -109,37 +140,6 @@ You can control which elements are tab stops with the `tabindex` attribute

<!-- example(dialog-content) -->

### Configuring dialog content via `entryComponents`

Because `MatDialog` instantiates components at run-time, the Angular compiler needs extra
information to create the necessary `ComponentFactory` for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of
`entryComponents` in your NgModule definition so that the Angular compiler knows to create
the `ComponentFactory` for it.

```ts
@NgModule({
imports: [
// ...
MatDialogModule
],

declarations: [
AppComponent,
ExampleDialogComponent
],

entryComponents: [
ExampleDialogComponent
],

providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```

### Accessibility
By default, each dialog has `role="dialog"` on the root element. The role can be changed to
`alertdialog` via the `MatDialogConfig` when opening.
Expand Down