toggle-switch | Mobile inspired toggle switch for modern browsers

Few custom classes you need to add as per your need. Hope you can customize it by yourself. If you need all files let me  know I will send you generic files.  


        
          
            
            Rule Name
            Rule ID
          
        
        
          
            
             
            
            {{item.ruleInfo.ruleName}}
            {{item.ruleInfo.ruleId}}
          
        
      
    
    
    genericcomponent.ts
    import { Component, Input, OnInit, OnDestroy } from '@angular/core';
    
    import { TVUIConstants } from '../utils/tvconstants';
    import { Subscription } from 'rxjs';
    import { Rule } from '../models/rule-models';
    import { BaseServices } from '../services/base.service';
    import { UIDGenerator } from '../services/uid-generator.service';
    @Component({
      selector: 'generic-checkbox',
      template: ``
    
    })
    
    export class ChkBoxComponent implements OnInit, OnDestroy {
        @Input() chkbxoptid:string;
        @Input() multiselectable:boolean = true;
        @Input() set data(value:any){
          if(value === undefined ||
            (this.chkbxoptid
              && value
              && value[this.chkbxoptid] === undefined)){
            this._hideCheckBox = false;
          }else{
            this._data = value;
            this._hideCheckBox = true
          }
        }
        @Input() rowindex:number;
        private isChecked:boolean;
        private _subscription: Subscription;
        private _hideCheckBox:boolean;
        private _data:any;
        private _chkbxunqid:string;
    
        constructor(private baseService:BaseServices,
                    private uidGenerator:UIDGenerator) {
          this._subscription = this.baseService.dataEvent.dataObserver.subscribe(data => {
            if(data.subevnttype === TVUIConstants.CLEAR_CHKBX_REF
              && data.cid !== undefined
              && data.cid !== this._chkbxunqid){
              this.isChecked = data.value;
              if(this._data)
                this._data.isChecked = data.value;
            }else if(data.subevnttype === TVUIConstants.REFRESH_RULES){
              if(this.isChecked && this.isChecked === true){
                this.isChecked = false;
              }
    
            }
          })
         }
    
        ngOnInit() {
          if(!this.multiselectable){
           // this._chkbxunqid = this.uidGenerator.getUnqUID("chkbx_");
          }
          if(this._data && this._data.isChecked === true)
                     this.isChecked = this._data.isChecked;
        }
    
        private checkClickHandler():void{
          this.isChecked = !this.isChecked;
          this._data.isChecked = this.isChecked;
    
          if(!this.multiselectable && this.isChecked){
           // this.baseService.dataEvent.publishEvt({subevnttype: TVUIConstants.CLEAR_CHKBX_REF, cid: this._chkbxunqid, value: false})
          }
        }
    
        get hideCheckBox(){
          return this._hideCheckBox;
        }
    
        ngOnDestroy() {
          // prevent memory leak when component destroyed
          this._subscription.unsubscribe();
        }
    }