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.

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.

• javascript
• angular
• datepicker
• angular-material

Share Improve this question Follow asked Feb 11, 2020 at 13:38 DuFuSDuFuS 37111 gold badge55 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

<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

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