We will use 'HostListener' and 'HostBinding' to accomplish the task.

 

The HTML:

        Credit Card Number              

 

Create directive:

import { Directive, ElementRef, HostListener, HostBinding } from '@angular/core';@Directive({  selector: '[credit-card]'})export class CreditCardDirective {  constructor(private element: ElementRef) {}}

 

Add a HostListener when user type input:

And we want that the max length of string user type is 16 and it should be formatted as '6666 6666 6666 6666'.

@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(' ');  }

 

Now we want to use @HostBinding to change style props when what user entered is not a number:

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(' ');  }