title: Mask Input Value Date Format Angular
body: <p>I want to mask my <code>input</code> value, basically I have an input field for credit card expiry date and want to mask it in format <code>mm/yy</code>, this is what I had tried :</p>
  
  <p><strong>input-mask.directive.ts</strong></p>
  
  <pre><code>import { Directive, HostListener } from '@angular/core';
  import { NgControl } from '@angular/forms';
  
  @Directive({
    selector: '[formControlName][appInputMask]',
  })
  export class InputMaskDirective {
  
    @HostListener('input', ['$event'])
    onKeyDown(event: KeyboardEvent) {
      const input = event.target as HTMLInputElement;
  
      const trimmed = input.value.replace(/\s+/g, '').slice(0, 4);
      if (trimmed.length &gt; 3) {
        return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);
      }
    }
  }
  </code></pre>
  
  <p>I got my expected output, but the problem is when using backspace on input field, it messed up, here is my demo on <a href="https://stackblitz.com/edit/angular6-mask-34t827input?file=app/phone-mask.directive.ts" rel="nofollow noreferrer">stackblitz</a>, how to solve this? or is there any better approach on input mask?</p>