Angular Material styles not being applied correctly

Question

Any ideas why the angular material styles are not being applied correctly?

I know there are a lot of questions on this but I can't seem to find one that resolved my problem. I have used angular material with no problem for several projects but can't seem to figure out what is going on here.
I am probably overlooking something simple but just can't see it. I have just upgraded to angular 7 so it could be related to that.

This is my dialog which just displays in the parent page with weird or no styling. It is doing something as the buttons have changed slightly as you can see compared to the cancel button.

<div>
  <h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
    <div>
        <div>
          <mat-form-field>
              <mat-label>Title</mat-label>
              <input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
              <mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
          </mat-form-field>
        </div>
        <div>
          <button (click)="this.dialogRef.close()">Cancel</button>
          <button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
        </div>
      </div>
</div>

import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-new-course-item-dialog',
  templateUrl: './new-course-item-dialog.component.html',
  styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
  newCourseItem: CourseItem = new CourseItem();

  constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    CourseAdminComponent,
    NewCourseItemDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule
  ],
  providers: [
    AuthService,
    DataService
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    NewCourseItemDialogComponent
  ]
})
export class AppModule { }


Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.10.5
@angular-devkit/build-angular       0.10.5
@angular-devkit/build-optimizer     0.10.5
@angular-devkit/build-webpack       0.10.5
@angular-devkit/core                7.0.5
@angular-devkit/schematics          7.0.5
@angular/cli                        7.0.5
@angular/compiler                   7.0.3
@angular/compiler-cli               7.0.3
@angular/flex-layout                7.0.0-beta.19
@angular/forms                      7.0.3
@angular/http                       7.0.3
@angular/language-service           7.0.3
@angular/platform-browser           7.0.3
@angular/platform-browser-dynamic   7.0.3
@angular/router                     7.0.3
@ngtools/webpack                    7.0.5
@schematics/angular                 7.0.5
@schematics/update                  0.10.5
rxjs                                6.3.3
typescript                          3.1.6
webpack                             4.19.1

Answer 1

The comments from @user18994 and @SiddAjmera answered this.

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

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

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

For more information on theming and instructions on how to create a custom theme, see the theming guide.

Source: https://material.angular.io/guide/getting-started

Answer 2

Sometimes missing imports in app.module.ts causes this issue. Make sure you have imported all the modules which you have used in your HTML.

As per latest angular material documentation you have to import modules from its respective package instead of @angular/material/

So instead of

import { MatToolbarModule , MatButtonModule, MatIconModule} from '@angular/material';

you have to import like

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

Answer 3

I was getting the styling issue and in my case it worked by just applying color="primary" and the code is changed

from:

<button mat-button [mat-dialog-close]="true">Delete</button>

to:

<button mat-button color="primary" [mat-dialog-close]="true">Delete</button>

I hope it helps someone save their time! :)

Answer 4

In Angular 11, I had to import the modules in each ts file to get my styles correct. I have more details posted in another answer.