title: How to observe input element changes in ng-content
body: <p>How to call parent component's function when child component observed input changes?</p>
  
  <p>The below is HTML structure.</p>
  
  <pre><code># app.comopnent.html
  &lt;form&gt;
    &lt;textbox&gt;
      &lt;input type="text"&gt;
    &lt;/textbox&gt;
  &lt;/form&gt;
  
  # textbox.component.html
  &lt;div class="textbox-wrapper"&gt;
    &lt;ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Restrictions are like following.</p>
  
  <ul>
  <li>TextboxComponent has <code>ng-content</code> and need to project <code>input</code> element to it.</li>
  <li>Emit an event in TextboxComponent when <code>input</code> element is inputted something.</li>
  <li>Don't wanna make <code>input</code> element to have more attributes, e.g. <code>&lt;input type="text" (input)="event()"&gt;</code>.</li>
  </ul>
  
  <p>I was writing code, but cannot find a solution...</p>
  
  <pre><code># input.directive.ts
  @Directive({ selector: 'input', ... })
  export class InputDirective {
    ngOnChanges(): void {
      // ngOnChanges() can observe only properties defined from @Input Decorator...
    }
  }
  
  # textbox.component.ts
  @Component({ selector: 'textbox', ... })
  export class TextboxComponent {
    @ContentChildren(InputDirective) inputs: QueryList&lt;InputDirective&gt;;
    ngAfterContentInit(): void {
      this.inputs.changes.subscribe((): void =&gt; {
        // QueryList has a changes property, it can observe changes when the component add/remove.
        // But cannot observe input changes...
      });
    }
  }
  </code></pre>