RxJS Observable binding to ListView in {N} + Angular

BehaviorSubject is a type of Observable that works really well to bind your data using Angular's `async` pipe. Doing so allows you to take advantage of Angular's performance enhanced change detection strategy, `OnPush`.

  •         
    import {Component, ChangeDetectionStrategy} from '@angular/core';
    import {BehaviorSubject} from "rxjs/BehaviorSubject";
    
    @Component({
      selector:'sample-cmp',
      template:`
      <StackLayout>
        <Button (tap)="addItem()" text="Add Item"></Button>
        <ListView [items]="items$ | async" (itemTap)="itemTap($event)">
          <template let-item="item" let-odd="odd" let-even="even">
            <StackLayout [class.odd]="odd" [class.even]="even">
              <Label [text]="item" textWrap="true"></Label>  
            </StackLayout>
          </template>
        </ListView>
      </StackLayout>
      `,
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class SampleComponent {
      public items$: BehaviorSubject<Array> = new BehaviorSubject([]);
      private _items: Array;
      
      constructor() {
        this._items = [
          'Item 1',
          'Item 2',
          'Item 3'
        ];
        this.items$.next(this._items);
      }
    
      public addItem() {
        this._items.push(`Item ${this._items.length+1}`);
        // important to always push a new Array
        // to properly update the view (immutability)
        this.items$.next([...this._items]);
        
        // this would be the wrong way
        // this.items$.next(this._items);
      }
    }
    		</code>
          </pre>
        </div>
      </li>
        
    </ul>