[Fixed] PIPE is getting called multiple times, how can I make it called only once?


HTML : (component.html)

<input #CostInput class="form-element" formControlName="cost" [value]="replaceDecimal.transform(FormGroup.get('cost').value)">


commaLocaleCodes = ['AM', 'AR'];
transform(input) {
        if (input) {
            const uiLanguage = 'am');
            if (this.commaLocaleCodes.indexOf(uiLanguage.toUpperCase()) > -1) {
                return input.replace(".", ",");
            } else {
                return input.replace(",", ".");

Issue here is that Pipe gets called multiple times. If we send input = 123.45 . The pipe should return 123,45 and stop. But filter again gets called. And again input becomes 123.45.
Pipe is pure already. I want to understand if we can stop the pipe after first itteration. Thanks.


With default change detection strategy, the function bound to the property (or to a directive) will be triggered for each change detection cycle. This is the reason why it’s discouraged to bind functions to properties and directives.

Instead invoke the function in the controller, save the response to a variable and use bind it in the template.

Controller (*.ts)

export class SomeComponent implements OnInit {
  transformedValue: any;

  ngOnInit() {
    this.transformedValue = this.replaceDecimal.transform(FormGroup.get('cost').value);

Template (*.html)

<input #CostInput class="form-element" formControlName="cost" [value]="transformedValue">

Leave a Reply

(*) Required, Your email will not be published