@@ -39,6 +39,37 @@ export class YourDialog {
39
39
}
40
40
```
41
41
42
+ ### Configuring dialog content via ` entryComponents `
43
+
44
+ Because ` MatDialog ` instantiates components at run-time, the Angular compiler needs extra
45
+ information to create the necessary ` ComponentFactory ` for your dialog content component.
46
+
47
+ For any component loaded into a dialog, you must include your component class in the list of
48
+ ` entryComponents ` in your NgModule definition so that the Angular compiler knows to create
49
+ the ` ComponentFactory ` for it.
50
+
51
+ ``` ts
52
+ @NgModule ({
53
+ imports: [
54
+ // ...
55
+ MatDialogModule
56
+ ],
57
+
58
+ declarations: [
59
+ AppComponent ,
60
+ ExampleDialogComponent
61
+ ],
62
+
63
+ entryComponents: [
64
+ ExampleDialogComponent
65
+ ],
66
+
67
+ providers: [],
68
+ bootstrap: [AppComponent ]
69
+ })
70
+ export class AppModule {}
71
+ ```
72
+
42
73
### Specifying global configuration defaults
43
74
Default dialog options can be specified by providing an instance of ` MatDialogConfig ` for
44
75
MAT_DIALOG_DEFAULT_OPTIONS in your application's root module.
@@ -109,37 +140,6 @@ You can control which elements are tab stops with the `tabindex` attribute
109
140
110
141
<!-- example(dialog-content) -->
111
142
112
- ### Configuring dialog content via ` entryComponents `
113
-
114
- Because ` MatDialog ` instantiates components at run-time, the Angular compiler needs extra
115
- information to create the necessary ` ComponentFactory ` for your dialog content component.
116
-
117
- For any component loaded into a dialog, you must include your component class in the list of
118
- ` entryComponents ` in your NgModule definition so that the Angular compiler knows to create
119
- the ` ComponentFactory ` for it.
120
-
121
- ``` ts
122
- @NgModule ({
123
- imports: [
124
- // ...
125
- MatDialogModule
126
- ],
127
-
128
- declarations: [
129
- AppComponent ,
130
- ExampleDialogComponent
131
- ],
132
-
133
- entryComponents: [
134
- ExampleDialogComponent
135
- ],
136
-
137
- providers: [],
138
- bootstrap: [AppComponent ]
139
- })
140
- export class AppModule {}
141
- ```
142
-
143
143
### Accessibility
144
144
By default, each dialog has ` role="dialog" ` on the root element. The role can be changed to
145
145
` alertdialog ` via the ` MatDialogConfig ` when opening.
0 commit comments