10

I'm trying to use Angular Material in my project and the tags are imported, but not all of the styling is there.

In my HTML:

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

It should show:

enter image description here

But it shows:

enter image description here

I added @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to styles.css and the calendar is showing fine, but the text field still looks bad.

enter image description here

matchifang
  • 5,190
  • 12
  • 47
  • 76

1 Answers1

19

You need to follow everything here. https://material.angular.io/guide/getting-started

Try adding this line to your styles.css: @import "~@angular/material/prebuilt-themes/indigo-pink.css";

As from this step: https://material.angular.io/guide/getting-started#step-4-include-a-theme

These are the imports you will need:

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

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@NgModule({    
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})
mahval
  • 2,133
  • 1
  • 18
  • 25
  • I added the style and the datepicker shows fine, but the input-text is not styled.. I will add a screen shot to the question. Do you know what I can do to fix that? – matchifang Jun 14 '18 at 11:52
  • Check my updated answer. Notice the `MatInputModule` import. If you still have trouble check this stackblitz: https://stackblitz.com/edit/angular-wzbq2t – mahval Jun 14 '18 at 11:55
  • :) Imports are a bit disconcerting at first, but you'll get the hang of it in no time! – mahval Jun 14 '18 at 12:01