angular / angular/components

docs-bug(MatDialog): Document standalone import

Open
#26,124 5 comments 5 reactions 0 assignees View on GitHub
area: docs area: material/dialog P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.