[ionic-4] Why is a function in *ngFor called multiple times?

Ionic Framework ionic-v3
1

This happens in all versions of Ionic, and probably also in Angular, but can someone please explain why calling a function within an *ngFor loop calls the function many, many times more than expected i.e. once??

    <div *ngFor="let section of pageSections">
        <app-get-email *ngIf="section.type==email" [headertext]=getSignupHeader(section.pageContent)></app-get-email>
      </div>
    </div>

In this example there are only 5 pageSections, and only 1 section.type==email, yet the getSignupHeader() funtion is called more than 20 times!

Why is this??

1 Like
2

We have found the same problem with our code.

Our best solution is to get rid of as many function calls in our html and just access public variables from our .ts files.

But, I wish I knew the answer, too.

(Also, I assume you actually have double quotes around your getSignupHeader(...) code.)

3

Thanks @VictorNorman, yeah, I sort of knew doing this was a bad idea! :smiley:

Implemented an alternative technique based on…

http://spraso.com/functions-in-angular-expressions-are-killing-your-performance/

…like you I would still like to know why this happens?