Using text-mask with Material datepicker

date-mask.directive.ts

import { Directive, ElementRef, OnDestroy } from '@angular/core';
import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask.js';

@Directive({
  selector: '[appMaskDate]'
})
export class MaskDateDirective implements OnDestroy {

  public mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
  public maskedInputController;

  constructor(private element: ElementRef) {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      mask: this.mask
    });
  }

  public ngOnDestroy(): void {
    this.maskedInputController.destroy();
  }

}

select-visit.component.html

<mat-form-field>
  <mat-placeholder>Enter Ends Date</mat-placeholder>

  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>

  <mat-datepicker #datePicker></mat-datepicker>

  <input matInput
         formControlName="dateEnd"
         [matDatepicker]="datePicker"
         #dateEnd
         appMaskDate
         required>
 
  <mat-error *ngIf="dateEndCtrl.hasError('dateStartEndRange')">
    {{ tForm.endDate.validation.dateTimeLimit | translate }}
  </mat-error>
</mat-form-field>

select-visit.component.ts

public eventSubscription: Subscription;
  
@ViewChild('dateEnd')
public dateEnd: ElementRef;

@ViewChild(MatDatepickerInput)
public datepickerInput: MatDatepickerInput<any>;
  
public ngAfterViewInit() {
  this.eventSubscription = fromEvent(this.dateEnd.nativeElement, 'input')
    .pipe(takeUntil(this._destroyed))
    .subscribe(() => {
      this.datepickerInput._onInput(this.dateEnd.nativeElement.value);
  });
}