title: How to get the selected option of dropdown on click of a button in Angular 7
body: <p>I have a dropdown that contains a few options coming from a loop,I need to get the selected option(not value) on click of a button. I tried with <code>ngModel</code> but I was able to get the value, not option. Can anyone please help me? Here is the code below</p>
  
  <h2>app.component.html</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;select&gt;
          &lt;option *ngFor="let group of groups" value="{{group.id}}"&gt;{{group.name}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;input type="button" (click)="getVal()" value="submit"/&gt;
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
  
      ngOnInit() {
  
      }
  
      getVal() {
  
      }
  
      groups = [{
          "id": 1,
          "name": "pencils",
          "items": "red pencil"
      },
      {
          "id": 2,
          "name": "rubbers",
          "items": "big rubber"
      },
      {
          "id": 3,
          "name": "rubbers1",
          "items": "big rubber1"
      }];
  }
  </code></pre>