bootstrap toggle button for angular 2

component.ts

import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, ngClass, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

@Component({
	selector: 'my-app',
	templateUrl: 'mytemplate.html',
	directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
	styleUrls: ['style.css']
})
export class AppComponent {
  value : boolean= false;
  Existing(){
    this.value = !this.value;
  }
}

template.html

<div class="col-md-4">
  <label class="toggle col-sm-8">
    <input type="checkbox"(click)="Existing()">
    <span class="handle"></span>
  </label>
</div>

<h2 class='bg-danger'>Your Switch value Is  : {{value}}</h2>

toggle.css

/**
 * toggle
 * --------------------------------------------------
 */
.toggle {
  height: 32px;
}
.toggle input[type="checkbox"], .toggle input[type="radio"] {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  text-indent: -100000px;
  filter: alpha(opacity=0);
  opacity: 0;
}
.toggle .handle {
  position: relative;
  top: -20px;
  left: 0;

  display: block;
  width: 62px;
  height: 32px;
  background-color: white;
          border-radius: 19px;
  -webkit-box-shadow: inset 0 0 0 1px #b8bfc8;
     -moz-box-shadow: inset 0 0 0 1px #b8bfc8;
          box-shadow: inset 0 0 0 1px #b8bfc8;

  -webkit-border-radius: 19px;
     -moz-border-radius: 19px;
}
.toggle .handle:before, .toggle .handle:after {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: 30px;
  height: 30px;

  content: "";
  background-color: white;
          border-radius: 30px;
  -webkit-box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
     -moz-box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
          box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
  -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
          transition: all .15s ease-in-out;

  -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
}
.toggle input[type="checkbox"]:disabled + .handle, .toggle input[type="radio"]:disabled + .handle, .toggle input[type="checkbox"]:disabled + .handle:before, .toggle input[type="radio"]:disabled + .handle:before, .toggle input[type="checkbox"]:disabled + .handle:after, .toggle input[type="radio"]:disabled + .handle:after {
  background-color: #e6e9ed;
  filter: alpha(opacity=60);

  opacity: .6;
}
.toggle input[type="checkbox"]:checked + .handle:before, .toggle input[type="radio"]:checked + .handle:before {
  width: 60px;
  background-color: #a0d468;
}
.toggle input[type="checkbox"]:checked + .handle:after, .toggle input[type="radio"]:checked + .handle:after {
  left: 30px;
  content: "";
  color: green;
  -webkit-box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
     -moz-box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
          box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
}