title: How to filter a table via a selectbox using angular
body: <p>Given a custom table component as well as a custom select box component, I want to be able to filter the table rows by selecting an option from the select box.</p>
  <p>My idea was to first add a click-listener to the options of my select box, so when clicking on an option, the <code>onOptionClicked()</code> method will be executed. Inside this <code>onOptionClicked()</code> method, I will emit an <code>optionSelected</code> event:</p>
  <pre><code>  @Output() optionSelected = new EventEmitter&lt;string&gt;();
  
    onOptionClicked(option: string) {
      this.optionSelected.emit(option);
    }
  </code></pre>
  <p>My table component will react upon the event <code>optionSelected</code>:</p>
  <pre><code>&lt;div class=&quot;tbl&quot; (optionSelected)=&quot;filterTableRows($event)&quot;&gt;
    &lt;table&gt;
      &lt;thead&gt;
  ...
  </code></pre>
  <p>There seems to be something fundamentally wrong with this idea, however:</p>
  <ol>
  <li><p>My IDE shows an error saying <code>Event optionSelected is not emitted by any applicable directives nor by div element </code>.</p>
  </li>
  <li><p>The table does not react on the optionSelected event.</p>
  </li>
  </ol>
  <p>It seems the issue is that my table component and my select-box component are different components, apparently they cannot communicate via event emitters. Can someone help me out, please?</p>