How does ng.core.ChangeDetectionStrategy.onPush work?

Question

If change detection strategy is set to onPush then if component attributes change then only component should be re-rendered.

Here is an example code:

        var SampleComponent1 = ng.core.Component({
            selector: "sampleone",
            template: "{{value}}",
            viewProviders: [ng.core.ChangeDetectorRef],
            changeDetection: ng.core.ChangeDetectionStrategy.onPush
        }).Class({
            constructor: [ng.core.ChangeDetectorRef, function(cd){
                this.cd = cd;
            }],
            ngOnInit: function(){
                this.value = 1;
                setInterval(function(){
                    this.value++;
                }.bind(this), 2000)
            }
        })

        var App = ng.core.Component({
            selector: "app",
            directives: [SampleComponent1],
            template: "<sampleone ></sampleone>"
        }).Class({
            constructor: function(){

            }
        })

Here even if attribute doesn't change the template is rendered? Is this a bug or I misunderstood onPush?

score 2 · Accepted Answer · answered Apr 23 '16 at 17:31

2

It isn't a bug. You made a mistake:

changeDetection: ng.core.ChangeDetectionStrategy.onPush

OnPush instead onPush

Plunker Example

answered Apr 23 '16 at 17:31

yurzui

205,937
32
433
399

score 2 · Answer 2 · edited May 23 '17 at 12:25

See @yurzui's answer for the fix, but I wanted to comment on

If change detection strategy is set to onPush then if component attributes change then only component should be re-rendered.

It's a bit more than that. According to Savkin's blog post (well, it is buried in a comment to @vivainio), with OnPush, Angular will only check the component for changes (i.e., check the template bindings) when

any of its input properties (not "component attributes") changes
it fires an event (e.g., a button click)
an observable fires an event, and the async pipe is used in the view with that observable

For more info about how OnPush works, please see https://stackoverflow.com/a/36845604/215945

score 0 · Answer 3 · answered Aug 05 '22 at 03:09

Angular 4+ Answer

The structure of Angular components has changed since this question was asked.

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'dummy-component',
    templateUrl: './dummy-component.component.html',
    styleUrls: [],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DummyComponent implements OnChanges {
  @Input() sampleInput: string;
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.sampleInput) {
      // Run any trigger when the sampleInput has changed
    }

  }
}

How does ng.core.ChangeDetectionStrategy.onPush work?

3 Answers3

Angular 4+ Answer