<label>

        Credit Card Number

        <input

          name="credit-card"

          type="text"

          credit-card

          placeholder="Enter your 16-digit card number">

      </label>

import { Directive, ElementRef, HostListener, HostBinding } from '@angular/core';

@Directive({

  selector: '[credit-card]'

})

export class CreditCardDirective {

  constructor(private element: ElementRef) {}

}

  @HostListener('input', ['$event'])

  onKeyDown(event: KeyboardEvent) {

    this.border = "";

    const input = event.target as HTMLInputElement;

    // the length should be no more than 16

    let trimmed = input.value.replace(/\s+/g, '');

    if(trimmed.length > 16) {

      trimmed  = trimmed.substr(0, 16);

    }

    // should be 6666 6666 6666 6666

    let numbers = [];

    for(let i = 0; i < trimmed.length; i +=4) {

      numbers.push(trimmed.substr(i, 4));

    }

    input.value = numbers.join(' ');

  }

  onKeyDown(event: KeyboardEvent) {

    this.border = "";

    const input = event.target as HTMLInputElement;

    // the length should be no more than 16

    let trimmed = input.value.replace(/\s+/g, '');

    if(trimmed.length > 16) {

      trimmed  = trimmed.substr(0, 16);

    }

    // if we pass in char, show red border

    if((/[^\d]/g).test(trimmed)) {

      this.border = '1px solid red';

    }

    // should be 6666 6666 6666 6666

    let numbers = [];

    for(let i = 0; i < trimmed.length; i +=4) {

      numbers.push(trimmed.substr(i, 4));

    }

    input.value = numbers.join(' ');

  }