With mat-sort mousemove causes Change Detection

[UmbertoPone]

Bug, feature request, or proposal:

When i use Mat-Sort feature, the change detection is fired everytime i move the mouse over headers. This cause calls to "backend" functions if there are any.

What is the expected behavior?

The mouseover event should show arrow only, without interact with all page.

What is the current behavior?

When mouse pass over a sortable header, all page is refreshed.

What are the steps to reproduce?

StackBlitz starter: https://angular-upooea.stackblitz.io
The function "test" is called every time you move your mouse over a sortable header.

To test yourself add in your sortable table sample: <div>{{test}}</div> for HTML And in TS:

private nHit:number = 0;
public get test(){
  console.log(this.nHit++);
  return 'TEST';
}

You'll see the console spamming a number while you move your mouse over the headers.

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

Maybe the "backend" function is very complex and timeconsuming.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I tested it with Chrome.

Angular CLI: 7.3.5 Node: 9.6.1 OS: win32 x64 Angular: 7.2.8 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.13.5 @angular-devkit/build-angular 0.13.5 @angular-devkit/build-optimizer 0.13.5 @angular-devkit/build-webpack 0.13.5 @angular-devkit/core 7.3.5 @angular-devkit/schematics 7.3.5 @angular/cdk 7.3.4 @angular/cli 7.3.5 @angular/material 7.3.4 @ngtools/webpack 7.3.5 @schematics/angular 7.3.5 @schematics/update 0.13.5 rxjs 6.4.0

Is there anything else we should know?

[josephperrott]

@crisbeto Looks like we might need bypass using Angular for managing this so we can sidestep change detection since the MatSort directive will share the change detector with component in lives in.

[crisbeto]

It's not really a mousemove, but it's a mouseenter and mouseleave. @josephperrott we can't do much about it as it's set up at the moment, because the arrow animation goes through Angular and we need to trigger change detection for it to fire. We can get around it if we used CSS for it. cc @andrewseguin

[ShauneDonohue]

Is there any way to prevent the change detection from running on mouseenter/mouseleave without breaking the sort arrow? @crisbeto you mentioned CSS?