CODEWITHSUNDEEP
angularangular-material
xeraphim
xeraphim

Reputation: 4645

Angular Material not applying styles

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:

enter image description here

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:

enter image description here

Upvotes: 0

Views: 1136

Answers (1)

sagat
sagat

Reputation: 1406

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

Upvotes: 2

Related Questions