CODEWITHSUNDEEP
angulardatepickerangular-material
compyutech
compyutech

Reputation: 581

Angular - Date picker toggle is not visible before clicking

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

Upvotes: 1

Views: 816

Answers (1)

compyutech
compyutech

Reputation: 581

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.

Upvotes: 0

Related Questions