Text

mask

Show only what a label needs.

Use it in your component

Standalone component

import { Component } from '@angular/core';
import { MaskPipe } from 'extra-pipe';

@Component({
  standalone: true,
  imports: [MaskPipe],
  template: `{{ '4242424242424242' | mask: 0: 4: '•' }}`,
})
export class ExampleComponent {

}

Template

{{ '4242424242424242' | mask: 0: 4: '•' }}

Try it live.

The output below runs the packed library. Edit data, not code.

Input (JSON)Use double quotes for text, or a number, array, object or null.

Parameters (JSON array)Ordered parameters: visibleStart, visibleEnd, maskCharacter. Locale is controlled separately.

Output localeThis pipe has no locale override.

Live template data

readonly value = "4242424242424242";
readonly parameter0 = 0;
readonly parameter1 = 4;
readonly parameter2 = "•";
{{ value | mask: parameter0: parameter1: parameter2 }}

Rendered output

••••••••••••4242