title: All dynamically created buttons react to same click
body: <p>I create my buttons using ngFor to iterate through my names array. I would like to pass my button (e.g. button1) to my function in typescript to change the color of the clicked object. However, I am struggling with this und would appreciate any help.</p>
  
  <pre><code>   &lt;ion-list *ngFor="let name of names; let i = index; "&gt;
          &lt;ion-card&gt;
          &lt;div&gt;
            &lt;div&gt;
                &lt;button #button1 ion-button block class="studentbutton {{ studentbutton1 }}" style="background-color:#058D65" (click)="studentbuttonOneClicked(i, button1);"&gt;&lt;/button&gt;
                &lt;button class="studentbutton  {{ studentbutton2 }}" style="background-color:#7ED321" (click)="studentbuttonTwoClicked(i)"&gt;&lt;/button&gt;
                &lt;button class="studentbutton {{ studentbutton3 }}" style="background-color:#FFCD56" (click)="studentbuttonThreeClicked(i)"&gt;&lt;/button&gt;
                &lt;button class="studentbutton {{ studentbutton4 }}" style="background-color:#FF6384" (click)="studentbuttonFourClicked(i)"&gt;&lt;/button&gt;
                &lt;ion-input placeholder = "contr." id="contribution"&gt;&lt;/ion-input&gt;
            &lt;/div&gt;
          &lt;/div&gt;
              &lt;/ion-card&gt;
        &lt;/ion-list&gt;
  </code></pre>
  
  <p>This is the function in my typescript file</p>
  
  <pre><code>studentbuttonOneClicked(i, button1) : void {
      console.log("start"); 
      var eld = document.querySelector('button1'); 
      console.log(eld);
      console.log(button1); 
      let el: HTMLElement = button1; 
      var myEl = angular.element( document.querySelector( button1 ) );
      myEl.addClass('highlighted');
    }
  </code></pre>
  
  <p>I would like to specifically change the passed object, because it would otherwise modify the color of all buttons of that row. </p>