title: How do I get the value from a MdListOption element?
body: <p>I'm having a lot of difficulty trying to use Angular Material, specifically with regards to the Selection List. I am displaying a list of objects in a Angular Material Selection List and I want to get the objects from the list of selected items.</p>
  
  <p>This is what I have so far, but <code>[value]="row"</code> just gives me <code>true</code> when I call <code>rows.selectedOptions.selected[0].value</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>submit(rows) {
      console.log(rows);
      console.log(rows.selectedOptions.selected[0].value);
      console.log(rows.selectedOptions.selected[0]._getHostElement().innerText); // ugly hack, but at least it gives me the text of the option
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;md-selection-list #rows dense&gt;
    &lt;md-list-option *ngFor="let row of config.data" [value]="row"&gt;
      {{row.title}}
    &lt;/md-list-option&gt;
  &lt;/md-selection-list&gt;
  
  &lt;div class="d-flex justify-content-end"&gt;
    &lt;div class="p-2"&gt;
      &lt;button md-button (click)="submit(rows)"&gt;
        &lt;span&gt;Submit&lt;/span&gt;
        &lt;md-icon aria-label="submit"&gt;arrow_forward&lt;/md-icon&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I get the actual <code>row</code> from the list of selected options?</p>