ChangeDetectionStrategy.OnPush and Observable.subscribe in Angular 2

I'm trying to wrap my head around best practice when using Observables alongside ChangeDetectionStrategy.OnPush.

The example demonstrates the common scenario of wanting to show some kind of loading message (or a simple spinner animation perhaps):

Plnkr here

@Component({
  selector: 'my-app',
  template: `Are we loading?: {{loadingMessage}}`,

  // Obviously "Default" will notice the change in `loadingMessage`...
  // changeDetection: ChangeDetectionStrategy.Default

  // But what is best practice when using OnPush?
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {

  private loadingMessage = "Wait for it...";

  constructor() {

  }

  ngOnInit() {

    // Pretend we're loading data from a service.
    // This component is only interested in the call's success
    Observable.of(true)
      .delay(2000)
      .subscribe(success => {

        if(success){
          console.log('Pretend loading: success!');

          // OnPush won't detect this change
          this.loadingMessage = 'Success!';
        }

      });

  }
}

I more or less understand the requirement for immutability with OnPush and, to me at least, it currently makes sense when talking about actual model data (likely held in some kind of store).

So, I have two questions:

1. Why doesn't the assignment of the new string value 'Success!' trigger the change detector? As far as immutability is concerned, the value has changed, right?
2. How should lightweight internal component state (ie. loadingMessage) be implemented when using ChangeDetectionStrategy.OnPush? If there are multiple best practices, please point me in the right direction.

Solution 1:

Good question. I have two quotes from Savkin about onPush (since the Angular.io docs don't seem to have any info on this topic yet):

The framework will check OnPush components only when their inputs change or components' templates emit events. -- ref

When using OnPush, Angular will only check the component when any of its input properties changes, when it fires an event, or when an observable fires an event. -- ref (in a comment reply to @vivainio)

The second quote seems more complete. (Too bad it was buried in a comment!)

Why doesn't the assignment of the new string value Success! trigger the change detector? As far as immutability is concerned, the value has changed, right?

OnPush immutability is in reference to input properties, not normal instance properties. If loadingMessage were an input property and the value changed, change detection would execute on the component. (See @Vlado's answer for Plunker.)

How should lightweight internal component state (i.e., loadingMessage) be implemented when using ChangeDetectionStrategy.OnPush? If there are multiple best practices, please point me in the right direction.

Here's what I know so far:

• If we change the internal state as part of handling an event, or part of an observable firing, change detection executes on the OnPush component (i.e., the view will update). In your particular case, I was surprised that the view did not update. Here are two guesses as to why not:
  • Adding delay() makes Angular look at it more like a setTimeout() rather than an observable change. setTimeouts do not result in change detection execution on an OnPush component. In your example the Change Detector has completed its work 2 seconds before the value of loadingMessage is changed.
  • Like @Sasxa shows in his answer, you have to have a binding in the template to the Observable. I.e., maybe it is more than just "an observable fires"... maybe it has to be a bound observable that fires. In which case, creating loadingMessage (or even a more generic state property) as an Observable itself will allow you to bind your template to its value (or multiple async values), see this example plnkr.
    Update 2016-04-28: it appears the binding must include | async, as shown in the plnkr, and in this plnkr.
• If we change the internal state and it is not part of event handling or an observable firing, we can inject ChangeDetectorRef into our component and call method markForCheck() to cause change detection to execute on the OnPush component and all ancestor components up to the root component. If only view state is changed (i.e., state that is local to the component and maybe its descendants), detectChanges() can be used instead, which will not mark all ancestor components for change detection. Plunker

Solution 2:

AFAIK, OnPush is used when working directly with observables:

//our root app component
import {Component, OnInit, ChangeDetectionStrategy} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `Are we loading?: {{ loadingMessage |async }}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {
  private loadingMessage;
  constructor() { }

  ngOnInit() {
    this.loadingMessage = Observable.of(true)
      .delay(2000)
  }
}

Solution 3:

With this ChangeDetectionStrategy.OnPush you are telling your component to only listen for changes on it's input properties.

I added loading component to your example just to show you how it works: http://plnkr.co/edit/k5tkmcLlzkwz4t5ifqFD?p=preview