Angular 2+ one-time binding

Question

In angular 1 we could do one time binding in this way: {{ ::myFunction() }}.

In angular 2 this is throwing:

EXCEPTION: Template parse er         


        

Answer 1

Best Practice Most of the Time: ngOnInit()

In Angular 2+ we have ngOnInit() which will generally only run one time, exactly when the component is initialized. This is the simplest and usually best solution to the issue of one-time binding.

Binding to a function can lead to dozens of unneeded calls to that function and slow down your app.

Instead of {{ ::myFunction() }}, create a property on the component and set its value in ngOnInit():

export class MyComponent implements OnInit {
  myValue: any;

  constructor() { }

  ngOnInit() {

    this.myValue = /* CALL FUNCTIONS OR CALCULATE VALUE HERE */

  }
}

And then in the template, simply use:

 {{ myValue }} 

Your calculation will run just once.