diff --git a/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.html b/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.html index 83aa31c9e3..7ea0606ef2 100644 --- a/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.html +++ b/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.html @@ -1,10 +1,12 @@ - - + + diff --git a/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.ts b/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.ts index 7c2c5fb85e..85f6ca308b 100644 --- a/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.ts +++ b/src/app/data-display/mask/mask-sample-4/mask-sample-4.component.ts @@ -4,7 +4,6 @@ import { Component, Pipe, PipeTransform } from '@angular/core'; selector: 'app-mask-sample-4', templateUrl: './mask-sample-4.component.html' }) - export class MaskSample4Component { public value = 100; public displayFormat = new DisplayFormatPipe(); @@ -14,13 +13,22 @@ export class MaskSample4Component { @Pipe({ name: 'displayFormat' }) export class DisplayFormatPipe implements PipeTransform { public transform(value: any): string { - return value + ' %'; + if (value !== null && value !== undefined) { + value = value.toString().trim(); + if (!value.endsWith('%')) { + value += ' %'; + } + } + return value; } } @Pipe({ name: 'inputFormat' }) export class InputFormatPipe implements PipeTransform { public transform(value: any): string { + if (value !== null && value !== undefined) { + value = value.toString().replace(/%/g, '').trim(); + } return value; } }