title: Angular 2 capture button attribute on click
body: <p>I'm using Angular-cli</p>
  
  <p>I have a simple array that I'm looping through and outputting as buttons.</p>
  
  <p>I'm adding the loop index as an attribute on the buttons</p>
  
  <p>How do I get the button attribute when its clicked.</p>
  
  <pre><code>    // component
      import { Component } from '@angular/core';
  
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
  
      export class AppComponent {
        title = 'app works!';
  
        blocks: string[] = ['Red','Green','Blue','Yellow','White'];
  
        constructor(){}
  
        clickEvent($event){
          alert($event.target.attr.data-index);
        }
  
      }
  
  
  
  
      // component.html
      &lt;div class="blocks"&gt;
  
        &lt;div *ngFor="let block of blocks; let i=index"&gt;
          &lt;button (click)="clickEvent($event)" [attr.data-index]="i"&gt;{{block}}&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>