Reactive Angular 2 Observe Decorators

Reactive Angular 2 Observe Decorators by @AngularClass

Reactive Observe Decorators
@ObserveViewChild
@ObserveViewChildren
@ObserveContentChild
@ObserveContentChildren

All you need to do is set these values to an EventEmitter instance for example.

//normal component with @Output event
@Component({
  selector: 'incrementer',
  template: `
  <div>
    <button (click)="increments.emit(1)">increment</button>
  </div>`
})
class Incrementer {
  @Output() increments = new EventEmitter();
}


@Component({
  selector: 'angularclass-app',
  directives: [ Incrementer ],
  template: `
    <div>
      <h4>Child Total Count: {{ counter }}</h4>
      <incrementer></incrementer>
      <button #decrement>decrement</button>
    </div>
  `
})
export class AngularclassApp {
  //query and listen to component output
  @ObserveViewChild(Incrementer) increments = new EventEmitter(); // same as ViewChild but you can use it now as an EventEmitter
  
  //query and listen to a DOM element
  @ObserveViewChild('decrement', 'click') decrements = new EventEmitter();


}

we also get redux for free

//normal component with @Output event
@Component({
  selector: 'incrementer',
  template: `
  <div>
    <button (click)="increments.emit(1)">increment</button>
  </div>`
})
class Incrementer {
  @Output() increments = new EventEmitter();
}


@Component({
  selector: 'angularclass-app',
  template: `
    <div>
      <h4>Total Count: {{ counterChange }}</h4>
      <incrementer></incrementer>
      <button #decrement>decrement</button>
    </div>
  `,
  directives: [Incrementer]
})
export class AngularclassApp {
  //query and listen to component output
  @ObserveViewChild(Incrementer) increments = new EventEmitter();
  
  //query and listen to a DOM element
  @ObserveViewChild('decrement', 'click') decrements = new EventEmitter();

  // Notice how we're able to just return an Observable
  counterChange = Observable.merge(
    this.increments,
    this.decrements.mapTo(-1)
  )
  .startWith(0)
  .scan((total, value) => total + value, 0);
    

}

Credits

Rob Wormald from the Angular team and ngrx team Proposal: Support declarative binding from View events to Observables

enjoy — AngularClass

##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]

Apache-2.0