Todo componente que será usado como dialog deve ser colocado em declarations e em entryComponents dentro do seu app.module.ts
, como a seguir:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
BannerComponent,
DialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
DialogComponent
]
})
export class AppModule { }
Recomendo você criar um novo módulo para colocar seus módulos do Angular Material, da seguinte forma:
- Crie um novo arquivo
.ts
no seu projeto (pode ser na mesma pasta de app.module.ts
) e dê um nome qualquer, como material.module.ts
.
- Dentro deste arquivo, defina o layout básico:
import { NgModule } from '@angular/core';
@NgModule({
imports: [],
exports: []
})
export class MaterialModule { }
- Importe os módulos dos componentes do Angular Material que deseja trabalhar, como o
MatDialogModule
.
// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';
- Crie uma variável para guardar a referência aos módulos logo abaixo das importações:
const materialModules = [MatDialogModule];
- Adicione a variável criada acima ao
imports
e exports
no @NgModule
:
@NgModule({
imports: [...materialModules],
exports: [...materialModules]
})
Seu material.module.ts
ficará assim:
import { NgModule } from '@angular/core';
// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';
const materialModules = [MatDialogModule];
@NgModule({
imports: [...materialModules],
exports: [...materialModules]
})
export class MaterialModule { }
- Agora, importe dentro do seu
app.module.ts
o arquivo que você acabou de editar e coloque sua referência dentro de imports
do @NgModule
:
import { MaterialModule } from './material.module';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule
],
declarations: [
AppComponent,
HeaderComponent,
BannerComponent,
DialogComponent
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
DialogComponent
]
})
Assim, seu código fica mais limpo e bem mais tranquilo de trabalhar. Sempre que você quiser usar um novo componente do Angular Material é só adicionar o módulo em material.module.ts
da mesma forma que o MatDialogModule
. Por exemplo, se você quiser adicionar o módulo de tabelas:
import { NgModule } from '@angular/core';
// Para habilitar o uso de 'dialog'
import { MatDialogModule } from '@angular/material/dialog';
// Para habilitar o uso de 'table'
import { MatTableModule } from '@angular/material/table';
const materialModules = [MatDialogModule, MatTableModule];
@NgModule({
imports: [...materialModules],
exports: [...materialModules]
})
export class MaterialModule { }
Abraços!