web-dev-qa-db-fra.com

Matériau angulaire 4 - le style de bouton mat n’est pas appliqué dans le composant mat-dialog

Je veux créer un mat-dialog avec un mat-button par défaut pour fermer la boîte de dialogue. Tout fonctionne sauf le bouton qui manque le style Material Design appliqué par Angular Material.

Comment puis-je obtenir le style à montrer? D'après les informations dont je dispose, j'ai importé tous les modules selon les besoins et configurez correctement chaque partie du Matériel angulaire, y compris les thèmes .

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-dialog.component.html:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  ...
</div>
<button mat-button mat-dialog-close>Close</button>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '@angular/material'

import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent
  ]
})
export class AppModule { }
htmlangulartypescriptangular-material2
7
GreatHam

Les modules nouvellement importés doivent être ajoutés à imports:

@NgModule{
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  ...
})
9
GreatHam

Si vous avez d'autres choses qui fonctionnent mais pas un composant spécifique, assurez-vous que le module de ce composant est importé et importé correctement.  

J'ai eu le même problème où j'avais CustomMaterialModule où j'importais tous les Modules de matériaux que je devais utiliser dans mon application. J'utilisais mat-button mais son style n'y était pas. Après quelques minutes de recherche, j'ai découvert que j'avais mis MatButtonModule uniquement dans le tableau imports de mon CustomMaterialModule et non dans le tableau exports.

Remarque: mon CustomMaterialModule héberge tous les modules de matériau dont j'ai besoin mon application donc des modules comme MatButtonModule ira dans mon CustomMaterialModule importe et exporte un tableau et plus tard, je ne ferais que utiliser mon CustomMaterialModule à d'autres endroits de mon application. J'ai fait ça à garder le code propre et facile pour l'édition. Donc, par exemple, si un mois sur la route, je n'ai pas besoin d'un module matériel, je peux simplement l'enlever mon CustomMaterialModule et ne vous inquiétez pas pour cela.

2
Junaid

Certains problèmes que j'ai remarqués sont -

  • importer {MatDialog, MatDialogRef, MAT_DIALOG_DATA} depuis '@ angular/material' dans votre my-dialog.component.ts

  • constructeur (dialogue public: MatDialog) {} est manquant

  • MatButtonModule n'est pas importé dans le fichier app.module.ts

Vous pouvez également suivre cet exemple ( https://material.angular.io/components/dialog/overview )

1
mohit uprim

Dans mon cas, j'ai 2 modules supplémentaires, un pour le mat-stuff et un autre pour les composants.

Initialement, j'ai ajouté les deux modules à l'app-module, mais cela n'a pas fonctionné.

j'ai déplacé l'importation de mat-module dans le composant-module (à supprimer de app-module, pas obligé) et cela a fonctionné, je suppose que c'est parce que le DI.

0
bresleveloper