Angular 2 Button

Angular 2 button offers multiple features like toggle button (switch button), checkbox button, and radio button with the possibly of uncheck.

angular 2 button example
angular 2 button example

Using button as checkbox or radio is good user experience practice.

live example at the end of the article

try angular 2 Button
try angular 2 Button

Let’s build our angular 2 button examples: (In out example we will see)

  • Switch Button (toggle)
  • Checkbox
  • Radio Button
  • Radio Button with Uncheckable option (ctrl + click)

Include bootstrap before we start (it’s easy : ) )

<link href=”” rel=”stylesheet”>

Main angular 2 button example:


 * Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import {ButtonCheckbox} from './button-checkbox.component';
import {ButtonRadio} from './button-radio.component';
/*Angular 2 Button*/
 selector: 'my-app',
 <h3>Switch Button (toggle)</h3>
 <p class="card card-block card-header"><b>{{switchButtonModel}}</b></p>
 <button type="button" class="btn btn-primary"
 [(ngModel)]="switchButtonModel" btnCheckbox
 btnCheckboxTrue="1" btnCheckboxFalse="0">
 Switch Button
 <h3>Checkbox Set</h3>
 <p class="card card-block card-header">
 BMW: <span style="color: red">{{}}</span>
 Audi: <span style="color: red">{{}}</span>
 Volkswagen: <span style="color: red">{{}}</span>
 <div class="btn-group">
 <label class="btn btn-primary" [(ngModel)]="" btnCheckbox>BMW</label>
 <label class="btn btn-primary" [(ngModel)]="" btnCheckbox>Audi</label>
 <label class="btn btn-primary" [(ngModel)]="" btnCheckbox>Volkswagen</label>

 <h3>Radio Button</h3>
 <p class="card card-block card-header"><span style="color: red">{{radioButtonModel || 'No Value Selected !'}}</span></p>
 <div class="btn-group">
 <label class="btn btn-primary" [(ngModel)]="radioButtonModel" btnRadio="Porsche">Porsche</label>
 <label class="btn btn-primary" [(ngModel)]="radioButtonModel" btnRadio="Maserati">Maserati</label>
 <label class="btn btn-primary" [(ngModel)]="radioButtonModel" btnRadio="Opel">Opel</label>

 <h3>Radio Button with Uncheckable option (ctrl + click)</h3>
 <div class="btn-group">
 <label class="btn btn-success" [(ngModel)]="radioButtonModel" btnRadio="Porsche" uncheckable>Porsche</label>
 <label class="btn btn-success" [(ngModel)]="radioButtonModel" btnRadio="Maserati"uncheckable>Maserati</label>
 <label class="btn btn-success" [(ngModel)]="radioButtonModel" btnRadio="Opel" uncheckable>Opel</label>

 directives: [ ButtonCheckbox, ButtonRadio, CORE_DIRECTIVES, FORM_DIRECTIVES ]
export class Angular2Button {
 //Switch button or toggle button contains 1 or 0
 private switchButtonModel:string = '1';
 //Radio button contains one value from a set of pre defined values
 private radioButtonModel:string = 'Maserati';
 //Set multiple values
 public checkButtonModel:any = {bmw: false, audi: true, volkswagen: false};

Our example uses Typescript as programming language.


Download all files from here:angular-2-button