docs-bug(MatDialog): Document standalone import

[robert-king]

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 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: {
      }
    })
  }

[wagnermaciel]

We plan to eventually make the MatDialog standalone which should resolve this issue entirely. I'll leave this open for now and we'll close it once we've done that

[PowerKiKi]

We have the exact same use-case, a convenience service using MatDialog.

@wagnermaciel how would the final solution look like ?

Instinctively, I tried something similar to the following, but that obviously does not work because imports does not exist for injectables:

@Injectable({
    providedIn: 'root',
    imports: [MatDialog] // DOES NOT COMPILE, because `imports` does not exist for injectable !
})
export class MyAlertService {
    public constructor(private readonly dialog: MatDialog) {
    }

    public confirm(message: string): void {
        const dialog = this.dialog.open(MyConfirmComponent, {
            data: {...},
        });
    }
}

More generally, how are we supposed to declare dependencies of a "standalone" service ? Are services never meant to be standalone ?

[Harpush]

Any suggestions how to use for the meantime?

[pedroestabruxelles]

Any suggestions how to use for the meantime?

You would have to create a module.
In there have the service on the providers list, and whatever imports you need, for example the MatDialogModule and the components you want to use

[PowerKiKi]

Creating a module would work, but you don't have to. You can also do without module. Your library would export its required providers, something like:

export const myLibProviders: ApplicationConfig['providers'] = [
    importProvidersFrom([MatDialogModule, MatSnackBarModule]),
    otherCustomFromMyLibProvider,
];

Then your app can use it like so:

bootstrapApplication(AppComponent, {
    providers: [
        myLibProviders,
        ... // All other app specific providers
    ],
}).catch(err => console.error(err));