angular material dialog button

Question

I implemented the dialog according to material documentation example:

<h1 mat-dialog-title>{{status}}</h1>
<div mat-dialog-content>
  <p>{{content}}</p>
</div>
<div mat-dialog-actions>
    <button mat-button mat-dialog-close>Close</button>
  </div>

The button however is not working and it doesn't have the style as other elements have.

Does anyone know what might be the cause?

this is the content of material.module.ts file:

import { NgModule } from '@angular/core'
import { MatButtonModule } from '@angular/material/button'
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatListModule} from '@angular/material/list';
import {MatTableModule} from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatTabsModule } from '@angular/material/tabs';
import {MatDialogModule} from '@angular/material/dialog';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
    imports: [MatButtonModule, MatFormFieldModule, MatInputModule, MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule, MatTableModule, MatPaginatorModule, MatTabsModule, MatDialogModule, MatGridListModule, MatCardModule, MatSelectModule, MatSortModule],
    exports: [MatButtonModule, MatFormFieldModule, MatInputModule, MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule, MatTableModule, MatPaginatorModule, MatTabsModule, MatDialogModule, MatGridListModule, MatCardModule, MatSelectModule, MatSortModule]
})

and this is the app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    RecentAnnouncementsComponent,
    CommunityAnalyticsComponent,
    SubscribeComponent,
    UnsubscribeComponent,
    NavigationComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

Can you show us your .module.ts file? maybe you did forget to import something (MatButtonModule for example) — Raphaël Balet, Apr 12 '21 at 10:58
Is this your case? https://stackoverflow.com/questions/47067153/angular-4-material-mat-button-style-not-being-applied-in-mat-dialog-component — ShayD, Apr 12 '21 at 11:00
Yes, this is my case. Don't know why none of the answers from that post works. I have added the description of app.module.ts — Niko Gamulin, Apr 12 '21 at 11:35
@NikoGamulin is your component a part of any other sub module? if so then you have to add the material module in that sub module — radio_head, Apr 12 '21 at 13:06
@radio_head, it is not a part of another submodule. The strange thing is that everything else works as expected. — Niko Gamulin, Apr 12 '21 at 13:23
@NikoGamulin can you try adding MatDialogModule to your app.module.ts instead of materialModule — radio_head, Apr 12 '21 at 14:59

angular material dialog button

0 Answers0