title: Toggle div enable drag event angular2
body: <p><a href="http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview" rel="nofollow noreferrer">1</a>: <a href="http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview" rel="nofollow noreferrer">Angular 2 toggle div </a><a href="http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview</a></p>
  
  <p>This is the html code used for view </p>
  
  <pre><code>  &lt;div class="myContainer"&gt;
         &lt;div class="tog-button" [ngClass]="{'Off':!showOnbutton,'On':showOnbutton}"&gt;
           &lt;div class="tog-button-off"  (click)="showOnbutton = !showOnbutton;updateClick();"&gt;
           &lt;/div&gt;
           &lt;div class="tog-button-on" [ngClass]="{'On':showOnbutton,'Off':!showOnbutton}" (click)="showOnbutton = !showOnbutton;updateClick();"&gt;
             {{clickData}}
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css code associated with component </p>
  
  <pre><code> .myContainer{
        width:100px;
  }
  
  
  .tog-button{
        height: 37px;
        // -webkit-box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
        // box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
        //background-image: -webkit-linear-gradient(-57deg, #fffefe 51%, transparent 0%);
        border: solid 2px #E86056;
    }
  
    .tog-button-on{
          height: 35px;
          width: 55%;
          text-align: center;
          background-color: #E86056;
          color: white;
         // background-image: -webkit-linear-gradient(196deg, #fffefe 8%, transparent 0);
          /* background-color: #E86056; */
          -webkit-clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
          clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
          padding-top: 8px;
          cursor: pointer;
     }
  
      .tog-button-off{
          background-color: white;
          height: 30px;
          width: 51%;
          float: right;
          text-align: center;
          color: #E8E8E8;
          padding: 3px;
          padding-left: 15%;
          cursor: pointer;
          /* border: 1px solid #E8E8E8; */
        }
  
  
        .tog-button-on.Off{
            background-color: #B2B2B2;
            transform: translateX(43px);
            transition: all 0.2s linear;
            -webkit-clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
            clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
        }
  
        .tog-button.Off{
             border:2px solid #B2B2B2;
         }
  
        .tog-button-on.On{
             background-color: #E86056;
             transform: translateX(0px);
             transition: all 0.2s linear;
             -webkit-clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
             clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
         }
  
        .tog-button.On{
             border:2px solid #E86056;
         }
  </code></pre>
  
  <p>Component ts file </p>
  
  <pre><code>    export class ToggleComponent {
         private showOnbutton:boolean = true;
  
     private clickData:string = "ON";
  
     constructor(){
       this.clickData = "ON";
       this.showOnbutton = true;
     }
  
     private updateClick(){
        if(this.showOnbutton){
            this.clickData = "ON";
        }else{
            this.clickData = "OFF";
        }
     }
  }
  </code></pre>
  
  <p>I have added slide animation for 2 divs in angular 2 wanted make it work on drag event also , Currently onclick its animating and showing other div </p>