CODEWITHSUNDEEP
javascriptangularpipeangular-pipe
vegeta
vegeta

Reputation: 23

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)">

Pipe.ts:

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 iteration. Thanks.

Upvotes: 1

Views: 1870

Answers (1)

Barremian
Barremian

Reputation: 31115

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">

Upvotes: 1

Related Questions