Angular Material DialogModule

Question

Some time ago I was directed to implement a Material Module to be shared in other modules

For brevity let's say it's this:

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  exports: [
    MatButtonModule,
    MatCheckboxModule,
  ]
})
export class MaterialModule {}

Then in another module, I import that module

import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';

@NgModule({
  imports: [
    MaterialModule
  ]
})
export class MyModule {}

In a component in MyModule I want to reference a MatDialog but it seems I need to import again in the component

import { MatDialog } from '@angular/material/dialog';

Is that the right way to do things?

It seems like a double import, once in the shared module, and then separately in the component which is part of a module which already imports the shared MaterialModule

Import { MatDialogModule } from '@angular/material/dialog';

import { MatDialog } from '@angular/material/dialog';

I'm pretty sure I'm doubling up on imports, but the IDE (VS Code) is directing me to do this.

What's the minimum number of imports to reference MatDialog in my component? Specifically in the constructor

constructor(public dialog: MatDialog) {}

https://material.angular.io/components/dialog/examples is a simple example that doesn't have the shared MaterialModule.

Answer 1

Yes, you need an import dialog module and dialog service. It is not a double import - it is different entities. Material example also has a shared module. Please see their StackBlitz. Underlined - is the shared material module.