CODEWITHSUNDEEP
angularangular-material
Muthukumar Marichamy
Muthukumar Marichamy

Reputation: 1214

angular material date picker close event

I am using Angular material date picker as below. when date picker is closed, I need to apply the CSS. FYI, I don't have any button to close the popup

Code:

 <input
          matInput
          #resultPickerModel="ngModel"
          [matDatepicker]="pickerEndDate"
          [(ngModel)]="endDate"
          (click)="pickerEndDate.open()"
          name="endDate"
          [min]="minStartDate"
          [max]="maxEndDateDate"
        />
        <mat-datepicker #pickerEndDate></mat-datepicker>

My expectation is that I need to apply the CSS when calendar is closed. Kindly help me to do that

Upvotes: 3

Views: 7153

Answers (1)

wessam yaacob
wessam yaacob

Reputation: 937

simply you can use close event then based on your logic you can apply your css using ngStyle 

<mat-datepicker #picker (closed)="onClose()"></mat-datepicker>

<div [ngStyle]="{'background-color':condition ? 'green' : 'red' }" ></div>


onClose(){
    //your condition logic
  }

Upvotes: 10

Related Questions