Angular5 *ngIf=“afunctioncall(); let L” results in the function being called 4 times

Question

I am working with Angular 5 and I want an element to return an object after finding from an array upon the result of a function call and then I use let L as a variable object to hold that.

When I do this I've noticed that the function is called multiple times.

I have created a stack-blitz to show this situation. here that function is called 4 times but in my local application, it is called more than 6 times.

https://stackblitz.com/edit/angular-ypwswn

I know this is because of change detection cycle. but I could not figure out how to solve this situation logically.

I've seen the following post however with it being related to Angular 2. I'm not sure it's relevant

Angular2 *ngIf="afunctioncall()" results in the function being called 9 times

The 'console.log is output 4 times.

Can anyone point me or am I missing anything?

And is there any way to avoid it?

Any help will be appreciated.

I need to pass a array to that method and get a selected leg from that array.

@UmerMehAr what don't you understand about that solution? Did you try it? What happened? — jonrsharpe, Dec 25 '17 at 13:54
i am passing a custom selected object from a Array based on User Interaction. So how can i call that in Constructor or ngOnInit? — Umar Farooq Aslam, Dec 25 '17 at 13:58
@UmerMehAr Instead of calling the function in the .html, where there are change detections, just do all the work on the .ts and display the result : https://stackblitz.com/edit/angular-drxdyn — YounesM, Dec 25 '17 at 13:59
@YounesM i need to pass leg array from template to that method. — Umar Farooq Aslam, Dec 25 '17 at 15:36
Why do it from the template? Can you provide some more code? — YounesM, Dec 25 '17 at 15:59
i just edit 2 more pics. have a look and share your thoughts in this case. My bad i should have add them earlier. @YounesM — Umar Farooq Aslam, Dec 26 '17 at 11:58

score 1 · Accepted Answer · answered Dec 25 '17 at 13:56

1

call the function in ngOnInit instead on your template

export class AppComponent implements OnInit {

finaldata : any;


ngOnInit() {

     this.finaldata = this.getSelectedLeg(this.data);

  }


}

in html

<div *ngIf="finaldata; let L">

</div>

answered Dec 25 '17 at 13:56

Arun Kumaresh

6,211
6
32
50

i appreciated but Can you please see my question again i have added 2 more pics – Umar Farooq Aslam Dec 26 '17 at 11:59
1

what was your problem right now can you explain clearly – Arun Kumaresh Dec 26 '17 at 12:01
My problem is when i add `console.log(...)` in getSelectedLeg method it console more then 5 6 times. as it should be only 1 time. angular change detector detect changed somewhere else but it also invoke this function perhaps. – Umar Farooq Aslam Dec 26 '17 at 12:33

Angular5 *ngIf=“afunctioncall(); let L” results in the function being called 4 times

1 Answers1