How to manually register to an inner component event in Angular?

Question

In a parent component I have this code :

  <div class="app">
      <counter [init]="myValue" (change)="myValueChange($event);"></counter>
    </div>

Which registers the (change) event via template.

The inner component has :

 @Output('change')counterChange = new EventEmitter();

Which emits (on click) :

this.counterChange.emit(...)

Question:

In the parent component, how can I register the (change) event via code and not via template?

Answer 1

You should subscribe to a Subject in the child component by adding the counter child component as a ViewChild.

IMPORTANT: As mentioned by @echonax an EventEmitter should never be used to subscribe to, as this class might eventually become for internal use only and is not guaranteed to be an Observable in the future, More details can be found in 'What is the proper use of an EventEmitter?'.

An example using a Subject and Subscription (untested):

app.component.ts:

import {Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
import {CounterComponent} from './counter.component';
import {Subscription} from 'rxjs/Subscription';

@Component({
    selector: 'my-app',
    template: `
    <div class="app">
        <counter [value]="myValue"></counter>
    </div>`
})
export class AppComponent implements AfterViewInit, OnDestroy {

    @ViewChild(CounterComponent) counter: CounterComponent;

    public myValue = 2;

    private counterSubscription: Subscription;

    ngAfterViewInit() {
        this.counterSubscription = this.counter.subject.subscribe(
            value => console.log('value', value)
        );
    }

    ngOnDestroy() {
        if (!!this.counterSubscription) {
            this.counterSubscription.unsubscribe();
        }
    }
}

counter.component.ts:

import {Component, Input} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
selector: 'counter',
template: `
    <div class="counter">
    <div class="counter__container">
        <button (click)="decrement();" class="counter__button">
        -
        </button>
        <input type="text" class="counter__input" [value]="value">
        <button (click)="increment();" class="counter__button">
        +
        </button>
    </div>
    </div>`
})
export class CounterComponent {

    @Input() value = 0;

    private _subject = new Subject<number>();

    public subject = _subject.asObservable();

    increment() {
        this.value++;
        this.subject.next(this.value);
    }

    decrement() {
        this.value--;
        this.subject.next(this.value);
    }
}