ngx-slide-toggle v0.1.1

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

material-slide-toggle Events