title: Angular 7: How to call a function when the value of a <select> element changes?
body: <p>I have an HTML  element in a component template, and need to trigger a function in my typescript file for the component when the selected option changes. </p>
  
  <p>What I have tried so far:</p>
  
  <ol>
  <li><p>Putting a (click) on the select. This did not work because it triggers when the select is clicked, before an option is selected. </p></li>
  <li><p>Putting a (click) on the  of the select element. For some reason, this did not work. </p></li>
  </ol>
  
  <p>Here is what I am trying to do:</p>
  
  <pre><code>        &lt;select name="sort-by" 
                  id="sort-by" 
                  class="form-control"
                  (&lt;someEvent&gt;)="myFunc()"&gt;
            &lt;option value="lotNumber" &gt;Lot Number  &lt;/option&gt;
            &lt;option value="firstName" &gt;First Name  &lt;/option&gt;
            &lt;option value="lastName"  &gt;Last Name   &lt;/option&gt;
          &lt;/select&gt;
  </code></pre>