mask

The mask pipe is an Angular pipe designed to mask sensitive string data by replacing characters with asterisks, while preserving a configurable number of characters at the beginning and end. It's ideal for obscuring sensitive information in user interfaces, such as credit card numbers, phone numbers, or API keys.

Examples

Example 1: Basic Usage

Mask sensitive strings with default settings (6 characters visible at start and end):

import {MaskPipe} from 'ngx-lift';

@Component({
  imports: [MaskPipe],
  template: `
    <p>{{ 'sensitive-string-to-mask' | mask }}</p>
    <!-- Output: sensit************o-mask -->
  `
})
export class MaskExampleComponent {}

Example 2: Custom Masking Options

Customize the number of visible characters at the beginning and end of the string:

import {MaskPipe} from 'ngx-lift';

@Component({
  imports: [MaskPipe],
  template: `
    <p>{{ 'sensitive-string-to-mask' | mask: {unmaskedPrefixLength: 2, unmaskedSuffixLength: 3} }}</p>
    <!-- Output: se*******************ask -->
  `
})

Example 3: Credit Card Masking

Mask credit card numbers while showing the last 4 digits:

import {MaskPipe} from 'ngx-lift';

@Component({
  imports: [MaskPipe],
  template: `
    <p>{{ creditCardNumber | mask: {unmaskedPrefixLength: 0, unmaskedSuffixLength: 4} }}</p>
    <!-- Example: "************1234" -->
  `
})

Example 4: Toggle Masking

Conditionally show/hide sensitive data:

import {MaskPipe} from 'ngx-lift';

@Component({
  imports: [MaskPipe],
  template: `
    <p>{{ apiKey | mask: {masked: showMask} }}</p>
    <!-- Toggle showMask to reveal/hide -->
  `
})

API Reference

mask

Angular pipe that masks sensitive string data by replacing characters with asterisks.

Signature

transform(value: string, options?: MaskOptions): string

Parameters

value: string
The input string to be masked.
options?: MaskOptions
(Optional) Configuration options for masking behavior. See MaskOptions interface below.

Returns

The masked string, or the original string if masking is disabled or the string is too short.

MaskOptions Interface

unmaskedPrefixLength?: number
Number of characters to leave unmasked at the beginning. Defaults to 6.
unmaskedSuffixLength?: number
Number of characters to leave unmasked at the end. Defaults to 6.
masked?: boolean
Boolean flag to enable/disable masking. Defaults to true.

Masking Conditions

The pipe applies masking based on the following conditions:

The length of the input string must be greater than the sum of unmaskedPrefixLength and unmaskedSuffixLength.
unmaskedPrefixLength and unmaskedSuffixLength must not be negative.
The masked option must be true.

If any of these conditions are not met, the original string is returned unchanged.