Wie lege ich eine Linie unter eine Schaltfläche, wenn sie ausgewählt ist?

Question

Ich habe 3 Tasten:

<div> 
    <!-- 1st button --> 
    <button md-button 
      (click)="setState(0)" 
      class="md-primary">Button 1 
    </button> 

    <!-- 2nd button --> 
    <button md-button 
      (click)="setState(1)" 
      class="md-primary">Button 2 
    </button> 

    <!-- 3rd button --> 
    <button md-button 
      (click)="setState(2)" 
      class="md-primary">Button 3 
    </button> 
</div> 

diese präsentieren mir nur drei Tasten und Aktionen im tut auf dem Klick basiert.

Jetzt möchte ich angeben, welche Schaltfläche gerade angeklickt wird, also wollte ich Unterstreichung für die Schaltfläche hinzufügen, wie kann ich das tun?

sollte sichtbar sein, bis eine neue Schaltfläche geklickt wurde, und dann sollte die Leitung zum newely geklickt Taste

dank

Answer 1

<div> 
    <!-- 1st button --> 
    <button md-button [style.border-bottom]="state === 0 ? 'solid 3px red' : ''" 
      (click)="setState(0)" 
      class="md-primary">Button 1 
    </button> 

    <!-- 2nd button --> 
    <button md-button [style.border-bottom]="state === 1 ? 'solid 3px red' : ''" 
      (click)="setState(1)" 
      class="md-primary">Button 2 
    </button> 

    <!-- 3rd button --> 
    <button md-button [style.border-bottom]="state === 2 ? 'solid 3px red' : ''" 
      (click)="setState(2)" 
      class="md-primary">Button 3 
    </button> 
</div>