Mask Pipe
The MaskPipe is an Angular pipe designed to mask characters in a string based on specified options. It can be used to obscure sensitive information in user interfaces, such as credit card numbers or phone numbers.
Usage
Basic Usage
The MaskPipe can be used in your templates to mask characters within a string. Here is an example:
<p>{{ 'sensitive-string-to-mask' | mask }}</p>
<!-- Output: sensit************o-mask -->Customizing Masking Options
You can customize the masking behavior by providing options to the mask pipe. The available options are:
unmaskedPrefixLength: Number of unmasked characters at the beginning of the string (default: 6).unmaskedSuffixLength: Number of unmasked characters at the end of the string (default: 6).masked: Boolean flag indicating whether masking is enabled (default: true). This is useful when you want to toggle the mask.
Example with custom options:
<p>{{ 'sensitive-string-to-mask' | mask: {unmaskedPrefixLength: 2, unmaskedSuffixLength: 3} }}</p>
<!-- Output: se*******************ask -->Conditions for Masking
The MaskPipe applies masking based on the following conditions:
- The length of the input string must be greater than the sum of
unmaskedPrefixLengthandunmaskedSuffixLength. unmaskedPrefixLengthandunmaskedSuffixLengthmust not be negative.- The
maskedoption must betrue.