Mask credit card and mobile number using pipe in Angular

This article explains how to mask the credit/debit card number and mobile number and display it on the web pages in an angular application.

First, let us know how to use the methods slice and replace with string values. Because slice and replace will be used in credit/debit card number masking. So let us recall first.

Slice and Replace method in Angular

Slice method

The Slice method is used to extract some parts of the string from the original string and return the extracted parts in a new string. The syntax is given below.

slice(start, end)

The parameter start describes the position where to start the extraction and the parameter end describes the position where to end the extraction but the extraction does not include the character in that position.

The position of a first character is 0 and a second character is 1 and so on.

Let us see some examples

Perform slice with this string value (let siteName="TipsToCode!")

siteName.slice(0) - Extract the entire string. The output is TipsToCode!.

siteName.slice(1,4)- Extract the string from the position 1 and upto the position 4. The output is ips.

siteName.slice(-1) - Extract the last character (or) first character from the reverse of the string. The output is !.

Replace method

Replace method search the replaceable string in the original string and replace that if it finds. It returns the replaced string in a new string.

We can do the replacement based on the string value or an expression. Let us see some examples.

Perform replace with this string value (let siteName="Welcome to TipsToCode! and Welcome to Programming world!.")

siteName.replace("Welcome", "Hello"); - The output is "Hello to TipsToCode! and Welcome to Programming world!.".

In the above string, the word Welcome is replaced by Hello. It replaced the first matching word, not all the matching words. If you want to replace all the matching words then you have to use the global modifier (g).

siteName.replace(/Welcome/g, "Hello"); - The output is "Hello to TipsToCode! and Hello to Programming world!.".

I hope you understood the usage of slice and replace methods in angular. Now let us see how to create the mask pipe for credit/debit card numbers and mobile numbers.

Mask Credit/Debit card number and display it on the page by using Pipe in Angular

Let us create the pipe named 'credit-debit-mask-pipe' by using the below command

ng g pipe credit-debit-mask-pipe

The above command created the two files under the app folder named 'credit-debit-mask-pipe.pipe.spec.ts' and 'credit-debit-mask-pipe.pipe.ts'. It registered the pipe in the app.module.ts file like below.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreditDebitMaskPipePipe } from './credit-debit-mask-pipe.pipe';
@NgModule({
  declarations: [
    AppComponent,
    CreditDebitMaskPipePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now let us write the logic to show only the last given digits of credit/debit card number and mask the remaining numbers

Do the changes like below in the corresponding files.

credit-debit-mask-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'creditDebitMaskPipe'
})
export class CreditDebitMaskPipePipe implements PipeTransform {
  transform(cardNumber: string, visibleDigits: number): string {
    //show number of digits at last based on input
    let maskedNumbers = cardNumber.slice(0, -visibleDigits);
    let visibleNumbers = cardNumber.slice(-visibleDigits);
    return maskedNumbers.replace(/./g, '*') + visibleNumbers;
  }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  cardNumber = "1234567890123456";
}

app.component.html

<h1 style="text-align: center">Welcome to TipsToCode Website!.</h1>
<p>Credit Card Number: {{ cardNumber | creditDebitMaskPipe:4 }}</p>
<router-outlet></router-outlet>

Now save all the changes and run the application. The last 4 digits of the credit/debit card number are visible and others are masked like below.

Credit Card Number: ************3456

If you want to show first given digits of credit/debit card number and mask the other numbers then use the below code.

credit-debit-mask-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'creditDebitMaskPipe'
})
export class CreditDebitMaskPipePipe implements PipeTransform {
  transform(cardNumber: string, visibleDigits: number): string {    
     //show number of digits at first based on input
     let visibleNumbers = cardNumber.slice(0, visibleDigits);
     let maskedNumbers = cardNumber.slice(visibleDigits);
     return visibleNumbers + maskedNumbers.replace(/./g, '*');
  }
}

The above code displays the first 4 digits of the credit/debit card number and others are masked like below.

Credit Card Number: 1234************

If you want to show only the first and last given digits of credit/debit card number and mask the numbers in between then use the below code.

credit-debit-mask-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'creditDebitMaskPipe'
})
export class CreditDebitMaskPipePipe implements PipeTransform {
  transform(cardNumber: string, visibleDigits: number): string {    
    //show first and last digits based on given input   
    let firstVisibleNumbers = cardNumber.slice(0, visibleDigits);
    let maskedNumbers = cardNumber.slice(visibleDigits, -visibleDigits);   
    let lastVisibleNumbers = cardNumber.slice(-visibleDigits);   
    return firstVisibleNumbers + maskedNumbers.replace(/./g, '*') + lastVisibleNumbers;
  }
}

The above code displays the first and the last 4 digits of the credit/debit card number and the numbers in between are masked like below.

Credit Card Number: 1234********3456

Note: Mostly the credit/debit card number should be 16 digits. So we have to pass the valid digits of input in the pipe in the app.component.html file like {{ cardNumber | creditDebitMaskPipe:4 }}. If you pass 16 as pipe input then that does not mask the credit/debit card number.

Mask mobile number and display it on the page by using Pipe in Angular

The pipe created above for masking the credit card number will be used for masking the phone number too. The only thing is we have to change the credit/debit card number into a 10 digit mobile number in app.component.ts file like below.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  cardNumber = "1234567890";
}

app.component.html

<h1 style="text-align: center">Welcome to TipsToCode Website!.</h1>
<p>Mobile Number: {{ cardNumber | creditDebitMaskPipe:2 }}</p>
<router-outlet></router-outlet>

Now save all the changes and run the application again. You can see the below result in the browser.

Mobile Number: 12******90

Angular provides built-in pipes to transform the data for display with a variety of formats and options. If you want to know that then please take a look at Angular built-in Pipes.

I hope you understood how to mask credit/debit card numbers and mobile numbers using pipe in Angular Applications. Thanks!. Keep Reading!.