theAlgorithmist

<div [formGroup]="ccSubGroup" class="form-content">
  <div *ngIf="showCardType">
    <img src="{{creditCardData[cardType].image}}" width="40" height="25">
    <span> {{creditCardData[cardType].name}} </span>
  </div>
  <label for="creditcard">
    Credit Card
    <input creditCardNumber
           [class]="ccnClass"
           type="text"

theAlgorithmist

/**
 * Credit card data for all supported card types (note that the MC data is old and does not consider that some new cards
 * issued in 2017 and beyond may have a BIN starting with 2)
 *
 * @author Jim Armstrong (www.algorithmist.net)
 *
 * @version 1.0
 */
import { CCTypes } from "../cc-types";

theAlgorithmist

@HostListener('keyup', ['$event']) onKeyUp(evt: KeyboardEvent): boolean
{
  // test for singleton leading negative sign as first character
  const v: string = this._input.value;
  const n: number = v.length;

  // for now, allow a blank field as it is possible that the entire number could be deleted by backspace before
  // entering a new number
  if (n == 0) {
    return true;

theAlgorithmist

<div class="mat-elevation-z8">

  <table mat-table matSort [dataSource]="dataSource">

    <tr mat-header-row *matHeaderRowDef="displayOrder"></tr>

    <tr mat-row *matRowDef="let row; columns: displayOrder" (click)="onTouched(row)"></tr>

    <ng-container matColumnDef="year">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="year"> Year </th>