onClear event handling in primeng Calendar

I'm trying to detect when the p-calendar input is cleared either by pressing backspace key or by pressing delete key. My code is:

  <p-calendar
  appendTo="body"
  [(ngModel)]="endDateValue"
  (onSelect)="emitAndSyncEndDate()"
  (onClear)="onClear($event)"
></p-calendar>

TS:

  onClear(e: any) {
    console.log('clears', e);
  }

It is not printing anything. The code is not working. Please point out my mistake here. Thanks.

You can catch 2 different Events

1. When you click "X" you will get "onClear" (to show one you should define [showClear]="true")

2. When you press "Clear" you will get onClearClick (to show one you should define [showButtonBar]="true")

The demo https://stackblitz.com/edit/angular-42jfmc?file=src%2Fglobal_styles.css,src%2Fmain.ts,angular.json

The Calendar.onClear event does not have any parameters so you can't use this if you want to distinguish between clearing by keyboard input and clearing by a button click.

However, it's possible to hook up to the input of the component and listen to its keyboard input event:

import { AfterViewInit, Directive, EventEmitter, Output } from '@angular/core';
import { Calendar } from 'primeng/calendar';

export interface KeyboardClearEvent {
  key: 'backspace' | 'delete';
}

@Directive({
  selector: 'p-calendar[onKeyboardClear]',
})
export class CalendarOnKeyboardClearDirective implements AfterViewInit {
  @Output()
  readonly onKeyboardClear = new EventEmitter<KeyboardClearEvent>();

  constructor(private readonly calendar: Calendar) {}

  ngAfterViewInit(): void {
    this.calendar.onInput.subscribe((event) => this.handleInput(event));
  }

  private handleInput(event: InputEvent): void {
    if (!(<HTMLInputElement>event.target).value) {
      switch (event.inputType) {
        case 'deleteContentBackward':
          this.onKeyboardClear.emit({ key: 'backspace' });
          break;
        case 'deleteContentForward':
          this.onKeyboardClear.emit({ key: 'delete' });
          break;
      }
    }
  }
}

Demo