Components: Material table: mat-cell method calls are executed twice

[VicKing05]

Bug, enhancement request, or proposal:

Detailed Reproduction Steps:

Just create a simple material data table with one column f.e. and call a method in this column defenition like this:

    <ng-container matColumnDef="test">
      <th mat-header-cell *matHeaderCellDef> test</th>
      <td mat-cell
          *matCellDef="let element"> {{test()}} °</td>
    </ng-container>

this calls the method test():

public test(): void {
console.log('test');
}

What is the expected behavior?

The expected behavior would be that the method test() is executed for each row in the table ONCE.

What is the current behavior?

The current behavior is that the method test() is executed twice for each row in the table.

What is the use-case or motivation for changing an existing behavior?

If the method call does complex compution the performance will drop by performing it twice for each row in the table.

Which versions of AngularJS, Material, OS, and browsers are affected?

• Angular: 8.1.4
• Angular Material: 8.1.4
• OS: Windows 10
• Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

[codymikol]

Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

[Splaktar]

I have transferred this issue to the correct repository for you.

[Airblader]

If you need to do complex calculations, you should do them ahead of time, not by function calls through the template. This is a simple change detection effect.

[VicKing05]

That is how I solved it now. But isnt it strange change detection calls everything twice? Once should be enough?

[Ploppy3]

Don't quote me on that but I think that in dev change detection runs twice to detect possible issues. Can you confirm that it also happens in production?

Also you should avoid binding functions in your template since these functions are executed at every change detection cycle.

[Airblader]

Yes, in development mode change detection runs twice so that the famous "ExpressionHasChangedAfterItHasBeenCheckedError" can be thrown.

[jelbourn]

Angular itself makes no assurances about how many time functions within expressions will be called. You shouldn't ever depend on functions being called only a certain number of times by Angular's change detection engine.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}