How do I pass values from child component to parent component without explicitly using events?
<p>Suppose I have two components, the parent <code>A</code> and a nested child <code>B</code>. I want to bind the <code>aVal</code> field of <code>A</code> to <code>bVal</code> field of <code>B</code> so that <code>aVal</code> is set to the value of <code>bVal</code> whenever <code>bVal</code> value changes. I know I can do it using <code>EventEmitter</code> and issuing an event whenever <code>bVal</code> changes but I do not want to explicitly care about events, I just want simple value binding. Is it even possible?</p>

<p>Parent component:</p>

<pre><code>import {Component, Output} from "@angular/core";

@Component({
  selector: 'a',
  template: '&lt;b&gt;&lt;/b&gt;'
})
export class A {
  @Output() aVal: string;
}
</code></pre>

<p>Child component:</p>

<pre><code>import {Component, Output} from "@angular/core";

@Component({
  selector: 'b',
  template: '&lt;input [(ngModel)]="bVal"/&gt;'
})
export class B {
  @Output() bVal: string;
}
</code></pre>

<p>I imagine the binding could look like <code>&lt;b (bVal)="aVal"&gt;&lt;/b&gt;</code> but it does not work.</p>

<hr>

<h2>UPDATE</h2>

<p>I decided that the best I can do is the following. It is quite clear and lets me ignore dealing with events as much as possible.</p>

<p>Parent component:</p>

<pre><code>import {Component, Output} from "@angular/core";

@Component({
  selector: 'a',
  template: '&lt;b (bValChange)="aVal=b.bVal" #b&gt;&lt;/b&gt;'
})
export class A {
  @Output() aVal: string;
}
</code></pre>

<p>Child component:</p>

<pre><code>import {Component, Output, EventEmitter} from "@angular/core";

@Component({
  selector: 'b',
  template: '&lt;input [(ngModel)]="bVal" (ngModelChange)="bValChange.emit()"/&gt;'
})
export class B {
  bValChange: EventEmitter&lt;void&gt; = new EventEmitter&lt;void&gt;();
  bVal: string;
}
</code></pre>