NgxToggle

A simple iOS style toggle switch for Angular projects.

Installation

Install @bobbyg603/ngx-toggle:

npm i @bobbyg603/ngx-toggle

Import the NgxToggleModule module in each module that uses <ngx-toggle>:

app.module.ts

import { NgxToggleModule } from '@bobbyg603/ngx-toggle';

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

Usage

Add <ngx-toggle> to your component's template:

app.component.ts

<ngx-toggle 
    id="toggle-example"
    [checked]="checked"
    [disabled]="false"
    (checkedChanged)="onCheckedChanged($event)">
</ngx-toggle>

Be sure to give each toggle a unique id. Failing to give each toggle a unique id will result in clicking one input toggling any inputs with a matching id.

API

Inputs

| Property | Type | Description | |----------|-------- |-------------------------------| | id | string | unique identifier for input | | checked | boolean | toggle is on (checked) or off | | disabled | boolean | control is not interactable |

Outputs

| Property | Type | Description | |----------------|-------------------------|---------------------------------------------------| | checkedChanged | EventEmitter<boolean> | Emits new checked when control has been toggled |

Attribution

The ngx-toggle-example layout was inspired by Benjamin King's Pricing Cards codepen.