Browsed by
Month: August 2018

Bootstrap & Angular 6 – Checkbox and radio buttons

Bootstrap & Angular 6 – Checkbox and radio buttons

Wanting to use the “Checkbox and radio buttons” as a toggle in Angular? Here is a quick write up.

Link to Bootstrap: https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

Scroll to the bottom of the page to use the following:

If you add the code straight to your project, you will quickly notice that the toggle does not work as desired. The reason for this is the “active” tag.

In order to apply this properly add ngClass to html and handle the toggle in your TS component.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary"
        [ngClass]="{'active':toggleCurrentEnvironment === 'development'}">
            <input type="radio" name="options" id="option1" autocomplete="off"
                         (click)="toggleEnvironments('development')"> Development
        </label>
        <label class="btn btn-secondary"
        [ngClass]="{'active':toggleCurrentEnvironment === 'qa'}">
            <input type="radio" name="options" id="option2" autocomplete="off"
                         (click)="toggleEnvironments('qa')"> QA
        </label>
        <label class="btn btn-secondary"
        [ngClass]="{'active':toggleCurrentEnvironment === 'performance'}">
            <input type="radio" name="options" id="option3" autocomplete="off"
                         (click)="toggleEnvironments('performance')"> Performance
        </label>
    </div>

</div>