Angular 7, function passing in html body getting called multiple times on page load

Asked Jun 06 '19 at 00:09

Active Jun 06 '19 at 00:09

Viewed 352 times

I am calling a runtime function in html to get values from API service call, but the issue her is the function is getting called multiple times. Here's the sample code for better understanding:

HTML:

<html>
<body>
.....
        {{myfunction()}}
.....
</body>
</html>

Typescript:

import....
export class ..... {
myfunction(num) {
console.log("Sample value...");
}
}

I can see console message more than once on loading the page into browser. What is causing this and what is the solution where the function should executes only once in HTML? Appreciate your help.

asked Jun 06 '19 at 00:09

SatAj

1,899
4
29
47

Probably should use OnInit to initialize then link via the class member. https://angular.io/api/core/OnInit – Nathaniel Johnson Jun 06 '19 at 00:14
this happened because of changeDetectionStrategy of angular. you can read more about changeDetectionStrategy read this: https://angular.io/api/core/ChangeDetectionStrategy – Sarjerao Ghadage Jun 06 '19 at 05:12
might be this answer helps you out https://stackoverflow.com/questions/45207357/function-gets-called-several-times – Sarjerao Ghadage Jun 06 '19 at 05:13

Angular 7, function passing in html body getting called multiple times on page load

0 Answers0