Angular Material not applying styles

Question

I've followed the guide on how to install angular material. First I added it via the cli

ng add @angular/material

In the app.module.ts I've added the following additional lines:

import {MatDatepickerModule} from '@angular/material/datepicker'; 
import { MatNativeDateModule } from '@angular/material/core';



imports: [
    [...],
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [MatDatepickerModule, MatNativeDateModule],

and in my HTML file I tried to create a datetimepicker

<mat-form-field color="accent" appearance="fill">
    <input matInput [matDatepicker]="picker1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

Unfortunately, the styling doesn't work at all. It looks like this:

Am I missing something?

Thanks in advance

edit: After adding the imports for MatFormFieldModule and MatInputModule it now looks like this which is still different from the tutorial:

hi mate, could u give any response if that solved ur problem? regards — sagat
– sagat, Commented Jul 27, 2020 at 10:14
yes, the field does look different than before but not like the template. I imported the pink & blue-grey template so shouldn't all be dark? — xeraphim
– xeraphim, Commented Jul 27, 2020 at 14:25
I have prepared a stackblitz for u --> stackblitz.com/edit/angular-ivy-y739ny the background should be greyish. And u should see the suffix calendar icon. — sagat
– sagat, Commented Jul 27, 2020 at 14:26

sagat · Accepted Answer · 2020-07-24 15:17:25Z

2

To properly show the right styles you will also need to import the MatFormFieldModule and the MatInputModule to your app.module.ts file like so:

import { MatDatepickerModule } from '@angular/material/datepicker'; 
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';    

imports: [
    [...],
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
providers: [MatDatepickerModule, MatNativeDateModule]

You can see that you need them by analyzing the html which consists of <mat-form-field></mat-form-field> and the <input> tag has a matInput directive on it.

regards

answered Jul 24, 2020 at 15:17

sagat

1,41414 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xeraphim Over a year ago

Thanks for your answer! Unfortunately, it still doesn't look as expected :( I will update the original post

Collectives™ on Stack Overflow

Angular Material not applying styles

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related