Vfrdtyky

I'm currently trying to apply bootstraps radio buttons approach on my Angular 6 project. You can apply within a button-group the active state on a button and
every time another button gets clicked, the active state switches to the clicked button. Kind of hard to describe with words, but here is the bootstraps documentation (very last section): Bootstraps doc

I added this to the components view:

  <div class="col-md-3 offset-2">



    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">

      <label class="btn btn-lg btn-outline-success active">

        <input type="radio" name="options" autocomplete="off" checked>New

      </label>

      <label class="btn btn-lg btn-outline-success">

        <input type="radio" name="options" autocomplete="off">

        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">

      </label>

      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified">

        <input type="radio" name="options" autocomplete="off">

        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">

      </label>

    </div>



  </div>

But the active state does not switch from button to button by clicking... Maybe someone can help me out on this :)

The active state of checkbox changes as per css class. In your case the active needs to be changed whenever user clicks on the button. You can achieve by having one variable say currentButton.

<div class="col-md-3 offset-2">



    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">

      <label class="btn btn-lg btn-outline-success" 

            [ngClass]="{active : currentButton == 'first'}"

            (click) = "currentButton='first'"

             >

        <input type="radio" name="options" autocomplete="off" checked>New

      </label>

      <label class="btn btn-lg btn-outline-success"

             [ngClass]="{active : currentButton == 'second'}"

            (click) = "currentButton='second'"

        >

        <input type="radio" name="options" autocomplete="off">

        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">

      </label>

      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified"

            [ngClass]="{active : currentButton == 'third'}"

            (click) = "currentButton='third'"

        >

        <input type="radio" name="options" autocomplete="off">

        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">

      </label>

    </div>



  </div>

in ts

public currentButton = "first"; //<-- you can change the default as per your requirement.