ngx-slide-toggle

Slide Toggle component for Angular 2/4/5.

It is extremely lightweight(<50kbs) and complies with Angular Package Format.

It is still under development and I am planning to add color customization along with few more toggles like IOS and Sony UI toggle.

Installation

npm install ngx-slide-toggle --save

Usage

Import the SlideToggleModule in your required module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SlideToggleModule } from 'ngx-slide-toggle';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SlideToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name = 'slideToggle';
  id = 'materialSlideToggle';
  checked = false;
  disabled = false;
  label = 'Toggle On/Off';
  labelledby = 'Some Other Text';

  onChange(value: boolean) {
    /* Your business logic goes here. */
  }
}

<material-slide-toggle 
    [name]="name" 
    [id]="id" 
    [checked]="checked" 
    [disabled]="disabled" 
    [aria-label]="label" 
    [aria-labelledby]="labelledby"
    (change)="onChange($event)">
</material-slide-toggle>

API

material-slide-toggle Inputs

|Attribute|Description|Type|Required|Default| |:--- |:--- |:--- |:--- |:--- | |name|Name value will be applied to the input element if present.|string|No|| |id|A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.|string|No|| |checked| Whether the slide-toggle element is checked or not.|boolean|No|false| |disabled|Whether the component is disabled.|boolean|No|false| |aria-label|Used to set the aria-label attribute on the underlying input element.|string|No|null| |aria-labelledby|Used to set the aria-labelledby attribute on the underlying input element.|string|No|null|

material-slide-toggle Events

|Name|Description|Type| |:--- |:--- |:--- | |change|An event will be dispatched each time the toggle changes its value.|boolean|