Angular Material Style Class not working

Question

I'm using Angular Material to add Date Picker to my app. For some reason the angular material is not applying the original angular material styles.

How it displays in my app:

How it SHOULD display:

What I have done:

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

// Added this to the Angular Module whose components require the date picker
import {MatNativeDateModule, MatDatepickerModule} from "@angular/material";

//Added this in the root style.css file for the entire app
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

I'm not sure what I'm doing wrong.

Update:

Module Code:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from "@angular/router";
import {ProposalListComponent} from './components/proposal-list.component';
import {ProposalDetailComponent} from './components/proposal-detail.component';
import {ProposalEditComponent} from './components/proposal-edit.component';
import {ReactiveFormsModule} from "@angular/forms";
import {ProposalEditResolverService} from "./services/proposal-edit-resolver.service";
import {SectorResolverService} from "../root/services/sector-resolver.service";
import {ProposalAddComponent} from './components/proposal-add.component';
import {AuthGuard} from "../authentication/guards/auth.guard";
import {MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule} from "@angular/material";
import {FileDropModule} from "ngx-file-drop";
import {ProposalListResolverService} from "./services/proposal-list-resolver.service";

@NgModule({
    imports: [
       CommonModule,
       RouterModule.forChild([
        {
          path: 'proposals',
          component: ProposalListComponent,
          canActivate: [AuthGuard],
          resolve: {proposals: ProposalListResolverService}
        },
        {
          path: 'proposals/:id',
          component: ProposalEditComponent,
          canActivate: [AuthGuard],
          resolve: {proposal: ProposalEditResolverService, sector: SectorResolverService}
        },
        {
         path: 'proposals/0/new',
         component: ProposalAddComponent,
         canActivate: [AuthGuard],
         resolve: {sector: SectorResolverService}
         }
        ]),
         ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatDatepickerModule,
         MatNativeDateModule,
         FileDropModule
        ],
         declarations: [ProposalListComponent, ProposalDetailComponent,    ProposalEditComponent, ProposalAddComponent],
         providers: [ProposalEditResolverService,     ProposalListResolverService]
         })
    export class ProposalModule {
    }

HTML:

This code is within the "ProposalEditComponent" which is part of the above module.

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>

Answer 1

According to Official Documentation of Angular Material:

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.

You can simply add the following to your style.css in order to get it work:

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

Or you can directly include using <link> tag in your head tag.

---

PS: To create your own custom built theme visit https://material.angular.io/guide/theming

Answer 2

It worked after wasting 2 days.

If you don't find any solution just add angular material again. It won't affect your code but It will add the CSS. Don't forget to re-start the angular server.

ng add @angular/material

Answer 3

have you tried to include the MatInputModule and MatFormFieldModule?

I think you need still to include the MatInputModule since you are working on a input, so that the Angular Material will initialize the style of the input.

// add this

import {MatNativeDateModule, MatDatepickerModule,MatFormFieldModule,MatInputModule } from "@angular/material";

also it is better if you also include MatFormFieldModule since you are working on a Form Field.

and MatInputModule is designed to work inside MatFormFieldModule. // check this link https://material.angular.io/components/form-field/overview

Sample Code.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

hope this helps ...

Answer 4

Try adding the style files to your angular.json, for example you can use the deeppurple amber prebuilt theme:

"styles": [
    "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
]

More information on this page: https://material.angular.io/guide/getting-started#step-4-include-a-theme

Answer 5

This is based on Angular 11. Like everyone said, I did make sure that the style was added to angular.json (which was already there) and the necessary imports in the app.module.ts . Despite these, I was still getting messed up styles. Very interestingly, it did pick up the theme color, but not the control styles. I ended up adding another import in each of the component files where, mat* components were used and it worked fine.

import { MatButtonModule } from "@angular/material/button";

Remember that when you add that import, your IDE (in my case VS Code and Visual Studio 2019) will tell you (by greying it out) that it's not needed and can be removed.

Answer 6

You need to wrap the input element with a <mat-form-field> and then the Material style is applied.

<input matInput .... /> on its own is not sufficient.

You need:

<mat-form-field>
    <input matInput .... />
</mat-form-field>

Answer 7

I know this may be a newbie answer as I'm a newbie in Angular. But I use VSCode and a extension that hosts HTML sites to live show changes when you do modifications in your code. When you try to use this to host your Angular's component html file locally it will not work with the CSS from material angular. So, one possible solution is just: Open a terminal in your project folder and run: ng serve This made the tricky for me.

Answer 8

add this line into your main style.css or something.

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

Dinoraj