Angular Material Datepicker toggle icon click event

Question

Is it possible to somehow catch click event on angular material datepicker toggle icon? I want trigger function foo().

My implementation looks like:

          <mat-form-field class="example-full-width">
            <input matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>

I have already tried put (click)="foo()" to mat-datepicker-toggle and mat-datepicker element but event not triggered.

Chellappan வ · Accepted Answer · 2020-02-11 14:20:20Z

6

Use opened and closed event emitter provided by angular date picker component to listen open and close of calander component.

<mat-form-field class="example-full-width">
            <input  matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle            
             matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker 
            #ref
            (opened)="toggle(ref)"
            (closed)="toggle(ref)"
            #picker></mat-datepicker>
</mat-form-field>

Example

answered Feb 11, 2020 at 14:20

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GoonGamja Over a year ago

you save my day

Paweł Skrzeszewski · Accepted Answer · 2020-02-11 13:55:22Z

0

Try to (focus)="foo()" instead of (click)="foo()"

answered Feb 11, 2020 at 13:55

Paweł Skrzeszewski

499 bronze badges

Collectives™ on Stack Overflow

Angular Material Datepicker toggle icon click event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related