Angular 4 Material - mat-button style not being applied in mat-dialog component

Question

I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.

How do I get the style to show? AFAIK I have imported all modules as required and properly set up each part of Angular Material including the themes.

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

You're importing MatButtonModule into the file but it is not listed in the module imports. — LukasGuptaLeary, Nov 02 '17 at 03:39

score 57 · Accepted Answer · edited Feb 26 '22 at 23:05

57

Newly imported modules need to be added to imports:

import { MatButtonModule } from '@angular/material/button'

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

edited Feb 26 '22 at 23:05

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Nov 02 '17 at 20:28

GreatHam

1,656
3
16
21

6

MatButtonModule was missing in my case – Codev Jun 11 '19 at 06:05
This fixed the issue for me, but I don't understand how mat-buttons work in this example I found on their website. They don't import MatButtonModule in their app.module.ts on any of the stack blitzes linked on this page... so how can it work? https://material.angular.io/components/button/examples – web1connoisseur Feb 20 '23 at 04:25

score 38 · Answer 2 · answered Jul 29 '20 at 09:17

38

Worth noting that the new angular 9 build system requires you stop the "ng serve" script and run it again after adding a material module

answered Jul 29 '20 at 09:17

Yonatan Naor

1,367
18
19

4

This was my issue. Had everything in right place, just forgot to restart. – pistol-pete Aug 04 '20 at 19:17
this solved my issue. im actually following a tutorial on youtube and ignored the instruction to stop the server before installing new packages. – user5567987 Oct 24 '21 at 13:55

Junaid · Answer 3 · 2021-12-13T05:45:22.397

TL;DR
If you have other things working but not a specific component, make sure that component's module is imported & imported correctly as modules have to be added to the imports:
@NgModule{
  imports: [
    MatCardModule,
    MatButtonModule
  ]
})
Note: Remember to stop the "ng serve" script and run it again after adding the material module as the new angular 9 build system requires to do so.

Explanation:
I had the same issue where I had a CustomMaterialModule where I was importing all the Material Modules I needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule & not in exports array.

Note: my CustomMaterialModule hosts all the Material Modules I need in my app so modules like MatButtonModule will go in my CustomMaterialModule imports and exports array and later I would only use my CustomMaterialModule in other places of my app. I did this to keep the code clean and easy for editing. So for example, if one month down the road I don't need a Material Module I can just remove it from my CustomMaterialModule and not worry about it.

The reply is pretty old, but what's important to know, is, that you actually have to e.g. import the `MatButtonModule`, too. I am using WebStorm and it showed me, that I had to import `MatToolbarModule` and `MatIconModule`, because it discovered this in the component template. But since I am not using `mat-button` (don't know if it even exists), but `button`, it did not discover, that I also should've imported `MatButtonModule`. After doing so, the appearance was as expected. Tried using Angular 13, SCSS and WebStorm 2021.3. — Igor, Dec 13 '21 at 00:59

score 11 · Answer 4 · edited Jul 18 '20 at 22:09

11

can also be missing a line in styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';

edited Jul 18 '20 at 22:09

Muhammad Dyas Yaskur

6,914
10
48
73

answered Jul 18 '20 at 21:35

Kvae Kvae22

111
1
5

1

this worked for me, strange the ng cli didn't add the stylesheet automatically – Jason Oct 21 '20 at 19:00
1

Three years later, Angular 12 still doesn't. This particular gotcha bites me on every new project :-( – Mawg says reinstate Monica Aug 09 '21 at 10:30
1

I feel anger and relief at the same time after trying for 2 hours to make the button work... Thanks, this worked for me. – Péter Aug 27 '21 at 12:42
Honestly baffles me that this isn't plastered everywhere on the documentation...so to add buttons you have to add a package, add it into the module imports, and then add this to your styles.css file... – perustaja Oct 06 '22 at 01:57

score 3 · Answer 5 · answered Nov 02 '17 at 10:42

Some issue that i noticed are -

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material' in your my-dialog.component.ts
constructor(public dialog: MatDialog) {} is missing
MatButtonModule is not imported inside app.module.ts file

You can also follow this(https://material.angular.io/components/dialog/overview) example

score 2 · Answer 6 · answered Sep 01 '22 at 21:42

2

Add your dialog in the declarations of AppModule. It works for me.

@NgModule({ declarations: [ AppComponent, ..., YourDialogComponent ],

answered Sep 01 '22 at 21:42

ozzi

21
2

score 1 · Answer 7 · answered Jan 31 '19 at 14:13

In my case i have 2 extra modules, 1 for the mat-stuff, and another for components.

Initially i added both modules to the app-module but that didnt work.

i moved the mat-module import into the components-module (discarding from app-module, not must) and it worked, i guess its because the DI.

score 0 · Answer 8 · answered Sep 05 '22 at 09:28

0

You need to import this package in your app.modoule.ts file

import { MatButtonModule } from '@angular/material/button'

and then in imports add this

imports: [MatButtonModule,...]

answered Sep 05 '22 at 09:28

Syed Abdul Hannan

42
6

Angular 4 Material - mat-button style not being applied in mat-dialog component

8 Answers8

Linked