Nsryjdtyk

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

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