Pipe Is Getting Called Multiple Times, How Can I Make It Called Only Once?

HTML : (component.html) Pipe.ts: commaLocaleCo

Solution 1:

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)

exportclassSomeComponent implements OnInit {
  transformedValue: any;

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

Template (*.html)

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