___
# 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.
```typescript
//normal component with @Output event
@Component({
selector: 'incrementer',
template: `
`
})
class Incrementer {
@Output() increments = new EventEmitter();
}
@Component({
selector: 'angularclass-app',
directives: [ Incrementer ],
template: `
Child Total Count: {{ counter }}
`
})
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
```typescript
//normal component with @Output event
@Component({
selector: 'incrementer',
template: `
`
})
class Incrementer {
@Output() increments = new EventEmitter();
}
@Component({
selector: 'angularclass-app',
template: `
Total Count: {{ counterChange }}
`,
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](https://github.com/robwormald) from the Angular team and ngrx team [Proposal: Support declarative binding from View events to Observables](https://github.com/angular/angular/issues/4062)
___
enjoy — **AngularClass**
[](https://angularclass.com)
##[AngularClass](https://angularclass.com)
> Learn AngularJS, Angular 2, and Modern Web Development from the best.
> Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com
___
Apache-2.0
---
_Source: https://npm.io/package/@angularclass/observe-decorators · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
