Custom attributes return null when logged in angular 2

Question

template
<button type="button"
        (click)="leaderBoard($event)"
        attr.leaders = "individual"
        [class.active]="individualLeaderboard">
   <label>INDIVIDUALS</label>
</button>
<button type="button"
        (click)="leaderBoard($event)"
         attr.leaders = "team"
         [class.active]="teamLeaderboard">
   <label>TEAMS</label>

.ts File

leaderBoard($event) {
    console.log($event.target.getAttribute('attr.leaders'))
 }

I'm simply trying to log the value of the custom attribute when each element is clicked. It works fine if I only have one button, but returns null if there are multiple buttons. Can someone explain the issue to me?

Answer 1

Change your html to:

<button type="button" (click)="leaderBoard($event)"
 leaders='individual' 
 [class.active]="individualLeaderboard">
 <label>INDIVIDUALS</label> 
</button> 

.. and in your ts:

leaderBoard($event){
console.log($event.currentTarget.getAttribute('leaders'));
 }

Answer 2

Would you replace your ts code with:

leaderBoard($event) {
    console.log($event.target.getAttribute('attr.leaders'));
}