How Do I Put A Line Under A Button When Its Selected?

I have 3 buttons:

Solution 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>

Share