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=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” rel=”stylesheet”>

Main angular 2 button example:

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
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*/
@Component({
 selector: 'my-app',
 template:`
 <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
 </button>
 
 <h3>Checkbox Set</h3>
 <p class="card card-block card-header">
 BMW: <span style="color: red">{{checkButtonModel.bmw}}</span>
 Audi: <span style="color: red">{{checkButtonModel.audi}}</span>
 Volkswagen: <span style="color: red">{{checkButtonModel.volkswagen}}</span>
 </p>
 <div class="btn-group">
 <label class="btn btn-primary" [(ngModel)]="checkButtonModel.bmw" btnCheckbox>BMW</label>
 <label class="btn btn-primary" [(ngModel)]="checkButtonModel.audi" btnCheckbox>Audi</label>
 <label class="btn btn-primary" [(ngModel)]="checkButtonModel.volkswagen" btnCheckbox>Volkswagen</label>
 </div>

 <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>
 </div>

 <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>
 </div>

 `,
 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.

angular-2-ui-framework

Download all files from here:angular-2-button