grid triggers change detection in angular2

[MortenSkjoldager]

Hi got the following markup,

<div class="grid-dashboard">
    <div [ngGrid]="gridConfig">
        <div *ngFor="let widget of widgets" [(ngGridItem)]="widget.config">
            <div class="grid-item-header" [hidden]="widget.config.hideWidgetHeader != null && widget.config.hideWidgetHeader">
                <span class="grid-item-header-name">{{widget.name}}</span>
            </div>
            <div class="grid-item-content">
                <dynamic-component [model]="widget.component"></dynamic-component>
            </div>
        </div>
    </div>
</div>

ngOnInit() : void {
        this.gridConfig = {
            'draggable': this.dashboardEditMode,    
            'resizable': this.dashboardEditMode,
            'cascade': 'up',  
        };

        this.widgets = [];
        for (let component of this.model.components) {
            this.widgets.push({
                name: component.config.displayName,
                config: {
                    sizex: component.config.sizeX,
                    sizey: component.config.sizeY,
                    col: component.config.col,
                    row: component.config.row
                },
                component: component,
                components: component.components
            });
        }
    }

Whenever i move the mouse on the screen i see all interpolutions of {{something()}} going bananas. (I've added console.log() events in there to see it happening). When i disable the grid it doesn't behave like that. Tried with the latest 2.0.1 with angular 2.4.4

[MortenSkjoldager]

BTW i tried to do a plunker, but i failed :( https://plnkr.co/edit/KxPusbL9IJLCDIpxZhxf?p=catalogue

[BTMorton]

I've created a root plunker here: https://plnkr.co/edit/3m8ost Give that a try and see if you can replicate the issue :)

[MortenSkjoldager]

Hi BTMorton, funny you should update it yesterday. I've been away for this in a month and just got back to it. I've done a fork here:

https://plnkr.co/edit/yPGKbkx9lTKwmvJcG21e?p=preview

I have added a single function in app.ts that will do a console.log and calling that function in my template. It goes crazy whenever i move the mouse. Any way to avoid that?

[MortenSkjoldager]

No update on this BTMorton?

[BTMorton]

I don't know. Best guess is that it's causing the angular change detection routine to run because it's bound the mouse move events. I don't know what would cause it otherwise. I can try to investigate further, but my knowledge of the Angular 2+ change detection algorithms is limited at best.

[MortenSkjoldager]

I guess it should only bind the move events when there's actually something that should move. Usually the configuration properties are set to false which means that i cant move or resize anything. So it should subscribe/unsubscribe on request.