docs-bug(MatDialog): Document standalone import
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Documentation Feedback
TLDR; would be nice to document how to provide dialog and snackbar for standalone components.
I don't want to provide MatDialogModule for every standalone component that uses a dialog.
I guess I could add it to main.ts. I have a convenience service that does alert(), confirm(), error() dialogs and hides the MatDialogModule from simple components. I don't have a great way of providing MatDialogModule for this convenience service.
in the [docs](https://material.angular.io/components/dialog/api) it says:
`import {MatDialogModule} from '@angular/material/dialog';`
now that i'm using standalone components,
is it recommend to use:
`importProvidersFrom(MatDialogModule),`
in main.ts
e.g.
```
bootstrapApplication(AppComponent, {
providers: [
// https://this-is-angular.github.io/angular-guides/docs/standalone-apis/configuring-the-router-using-standalone-features
provideRouter(
routes,
withDebugTracing()),
importProvidersFrom(HttpClientModule),
importProvidersFrom(MatDialogModule),
provideAnimations(),
]
}).catch(err => console.error(err));
```
I guess it wouldn't make sense to provide MatDialogModule to the convenience service separately to how I provide it to some standalone components, as then perhaps the app would have inconsistent dialogs, so in main.ts makes sense, just feels disorganised.
### Affected documentation page
https://material.angular.io/components/dialog/api
p.s
also worth mentioning, fyi, sometimes we have to explicitly import our components to avoid errors, but we don't have any entrypoints or anything:
```
async serviceMethodThatOpensDialog(
) {
const { SparkplugbDatapointBulkCreateComponent } = await import('../datapoint-sparkplugb/sparkplugb-datapoint-bulk-create/sparkplugb-datapoint-bulk-create.component'
)
return this.dialog.open(SparkplugbDatapointBulkCreateComponent, {
data: {
}
})
}
```
Contributor guide
Research direction
Start with the affected Dialog API documentation page at https://material.angular.io/components/dialog/api and review how it currently documents MatDialogModule. The issue asks for guidance on providing dialog and snackbar services to standalone components; done means the documentation explains the recommended approach for standalone apps.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100