Angular - Date picker toggle is not visible before clicking

0
votes

I am trying to add date picker in Angular8.

I have code like below

<mat-form-field>
  <input matInput [matDatepicker]="myDatePicker"/>
  <mat-datepicker-toggle [for]="myDatePicker" matSuffix></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
</mat-form-field>

I have imported like below in app.module.ts

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

I have added all four in @NgModule import

When page is loaded, Any element is not visible but showing up when I click on it

When Page loaded

Clicking Input

Clicking Toggle

Thanks in advance...

1
angulardatepickerangular-material
Check the console if you are getting an errors - Nicholas K
@NicholasK No error is showing in console. - compyutech

1 Answers

0
votes

Finally I could solve the issue. I was missing the style import. I did import like below in style.css of main folder.

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

It was not mentioned in tutorials but I realized when I downloaded working example and compared with my code.