Package Exports

ngx-slide-toggle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-slide-toggle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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