I have an Angular function where i log a value
$scope.getFormattedDate = function(date){
console.log(date)
}
and here in the html code
span {{::getFormattedDate('hello')}}
According to this the value should get rendered once and never again. But when i scroll, the value gets printed in the console continuously.
Where am i going wrong?
One-time binding is used for values that won't change after the page is stable. "Stable" generally means that the expression has been assigned a value. Once the value is set, changes to the value in the controller won't change the displayed value until the page is reloaded. The syntax is {{::expression}}.
For two-way data binding, declare a private property and access its value using get and set methods in the component class. Then, assign that property to [(ngModel)] . For example, declare a private property with a get and set method, as shown below. Now, assign userName to [(ngModel)] in the template.
In a two-way binding, the data flow is bi-directional. This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
In one-way data binding information flows in only one direction, and is when the information is displayed, but not updated. In two-way data binding information flows in both directions, and is used in situations where the information needs to be updated. They each have their uses, but most applications use both.
According to Angular documentation,
One-time binding expressions will retain the value of the expression at the end of the digest cycle as long as that value is not undefined
Your function is not returning anything, so the value is undefined. getFormattedDate
needs to return something for Angular recognize the one-time binding.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With