CODEWITHSUNDEEP
angularangular2-changedetection
Carli Beeli
Carli Beeli

Reputation: 810

Augury shows Change Detection Default eventhough ChangeDetectionStrategy.OnPush is configured

I have an Angular(4) component where I have activated ChangeDetectionStrategy.OnPush:

tile.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Tile } from './tile';

@Component({
    selector: 'tile',
    template: `
        <div>
        <div>{{this.data.title}}</div>
        <div>{{this.data.image}}</div>
    </div>
    `,
    styleUrls: ['./tile.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TileComponent {

    @Input() data: Tile;

    constructor() {}
}

tile.ts

import { List, Map } from 'immutable';

export class Tile {
  _data: Map<string, any>;

  get title() {
      return <string> this._data.get('title');
  }

  setTitle(value: string) {
      return new Tile(this._data.set('title', value));
  }

  get image() {
      return <string> this._data.get('image');
  }

  setImage(value: string) {
      return new Tile(this._data.set('image', value));
  }

  constructor(data: any = undefined) {
    data = data || { title: '', image: '' };
    this._data = Map<string, any>(data);
  }
}

But when I run it, Augury always shows me this component as having ChangeDetectionStrategy.Default: enter image description here

No error is thrown.

Does anybody know why the ChangeDetectionStrategy would be reverted to Default, or if Augury may display the wrong value, how I could test if indeed ChangeDetectionStrategy.OnPush would be correctly configured?

Thanks a bunch :)

Upvotes: 2

Views: 557

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105439

Here is the simple test you can use to check the current ChangeDetectionStrategy. Add the following code:

@Input() data: Tile = {'title': 'title', 'image': 'image'} as Tile; 

constructor() { 
    setTimeout(()=>{ 
          this.data = {'title': 'hello', 'image': 'image'} as Tile; 
          console.log("/// timeout executed"); }, 5000); 
    }

If your view is updated in 5 seconds, you have ChangeDetectionStrategy.Default, if not, it's ChangeDetectionStrategy.OnPush.

You mentioned that the view wasn't updated, which means that the current strategy is OnPush and Augury shows incorrect information.

To see the changes, you can modify the example like this:

@Input() data: Tile = {'title': 'title', 'image': 'image'} as Tile; 

constructor(private cd: ChangeDetectorRef) { 
    setTimeout(()=>{ 
          this.data = {'title': 'hello', 'image': 'image'} as Tile; 
          console.log("/// timeout executed"); }, 5000); 
          this.cd.detectChanges();
    }

Upvotes: 1

Related Questions