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>

Are you getting any developer console errors? Also, please post the html *and* relevant module(s)! — Z. Bagley, Jan 16 '18 at 17:06
@Z.Bagley thanks for the comment. No errors logged at all. The date picker works fine its just the style doesn't apply. Please see my updated question for the details you requested — Skywalker, Jan 17 '18 at 09:07
It's looking more like a version mismatch error at this point. `MatNativeDateModule` is old and no longer in use and `MatDatepickerModule` should be imported using `import {MatDatepickerModule} from '@angular/material/datepicker';`. Try removing `MatNativeDateModule` and/or swapping the import directory for `MatDatepickerModule`. If not it's a more complex versioning problem to do with package.json and npm. — Z. Bagley, Jan 17 '18 at 16:08
Any news on this subject? I'm facing the same problem. The style is not applied to my datepicker input — Pedro Tainha, Mar 08 '18 at 13:26
@import "@angular/material/prebuilt-themes/deeppurple-amber.css" in your scss file might help — Ish, Jun 21 '19 at 09:18

Saleh Mahmood · Answer 1 · 2020-01-22T10:34:41.523

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.

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

score 23 · Answer 2 · answered Jun 08 '20 at 09:59

23

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

answered Jun 08 '20 at 09:59

Tejashree

750
12
14

2

Thanks! it is best way to solve this, as it will also ask if you want to add globally and option to add animations module. – RV. Mar 08 '22 at 19:26
1

This helped me and is the answer, perhaps because I did custom theme. – Zaffer Jun 19 '22 at 20:13
1

it's the solution – sadati boina Mar 03 '23 at 08:39
1

You saved me 1 day as I already wasted 1 myself. Thanks! – jfl Aug 02 '23 at 19:15

score 10 · Answer 3 · answered Jan 16 '18 at 17:47

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 ...

This was the issue for me. It's worth noting that the path has changed for more recent releases: import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; — kiprainey, Dec 16 '20 at 21:26

score 8 · Answer 4 · answered Jul 30 '18 at 14:55

8

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

answered Jul 30 '18 at 14:55

Uentee

783
1
7
15

3

btw this was already present in my angular.json, but I had to restart angular serve to see material styles applied. – David Douglas Dec 04 '19 at 11:44
You should make an answer with that comment, so I can upvote it – lilalinux Feb 18 '20 at 09:50

score 5 · Answer 5 · edited Dec 31 '20 at 20:33

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.

edited Dec 31 '20 at 20:33

Dharman

30,962
25
85
135

answered Dec 31 '20 at 20:27

James Poulose

3,569
2
34
39

1

I totally forgot to import this module... this was the issue I was having. Thank you for your answer! – Stevers Feb 28 '21 at 18:35
I have Angular11, I tried importing mat components in each component but still facing an issue that css classes still not working. I tried almost all options suggested here but still not worked for me – Sumit Rane Apr 29 '21 at 19:05

score 2 · Answer 6 · answered Nov 12 '21 at 06:23

2

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

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

Dinoraj

answered Nov 12 '21 at 06:23

DinoRaj p

21
3

user2846469 · Answer 7 · 2020-02-16T13:25:04.800

1

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>

edited Feb 16 '20 at 13:25

answered Feb 14 '20 at 13:18

user2846469

2,072
3
18
32

score 0 · Answer 8 · answered Jun 19 '21 at 08:07

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.

Angular Material Style Class not working

8 Answers8

Linked