Browsed by
Category: Javascript

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>
Presentation on Unit Testing

Presentation on Unit Testing

This presentation goes over the difference between mock objects and stubs. Roy Osherove points out some common misconceptions that occur when creating test cases such as the more unit cases there, the safer your code is. He also illustrates the importance of Test Reviews.