How to develop a pipe that formats credit card numbers with masking

Question

With the help of code can i know How to develop a pipe that formats credit card numbers with masking?

Answer 1

To develop a pipe that formats and masks credit card numbers in Angular:

Step 1: Generate the Pipe

ng generate pipe creditCardMask

Step 2: Implement the Pipe Logic

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'creditCardMask' })

export class CreditCardMaskPipe implements PipeTransform {

  transform(cardNumber: string): string {

    if (!cardNumber || cardNumber.length < 4) return cardNumber;

    const visible = cardNumber.slice(-4);

    return cardNumber.slice(0, -4).replace(/\d/g, '*') + visible;

  }

}

Step 3: Use in Template

<p>Card: {{ user.cardNumber | creditCardMask }}</p>