title: Angualr2 how to get attr.data-item-code on (click)
body: <p>Trying to get <code>attr.data-item-code</code> from <code>*ngFor</code> select option, I want to get the data attribute value when I click a button.</p>
  
  <pre><code>&lt;div&gt;
    &lt;select&gt;
   &lt;option *ngFor="let x in players" [attr.data-item-code]="x.code"&gt;{{ x.name }}&lt;/option&gt;
  &lt;/select&gt;
   &lt;button (click)="preview()"&gt;Preview Player&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried something like below but the value is <code>null</code></p>
  
  <pre><code>&lt;div #dt&gt;
    &lt;select&gt;
   &lt;option *ngFor="let x in players" [attr.data-item-code]="x.code"&gt;{{ x.name }}&lt;/option&gt;
  &lt;/select&gt;
   &lt;button (click)="preview(dt.getAttribute('data-item-code'))"&gt;Preview Player&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Preview function: --</p>
  
  <pre><code>preview(code){
   console.log(code) // returns null
  }
  </code></pre>
  
  <p>Is there a way to get the <code>x.code</code> when I click <code>preview()</code>?</p>