bobbyg603 / ngx-toggle

😻📱📐 Beautiful iOS-style toggle switch for Angular

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:

pricing.component.html

<ngx-toggle 
  id="toggle-example"
  [(checked)]="checked"
  [disabled]="false"
  (checkedChange)="onCheckedChange($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.

You can also use <ngx-toggle> as a FormControl:

checkout.component.html

<form [formGroup]="formGroup">
  <ngx-toggle class="ms-auto" formControlName="saveForNextTime"></ngx-toggle>
</form>

checkout.component.ts

formGroup = new FormGroup({
  saveForNextTime: new FormControl(false)
});

🧩 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
checkedChange	EventEmitter<boolean>	Emits new checked value when control has been toggled

🤝 Attribution

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

ngx-toggle's Issues

Background should be gray when disabled

If the switch is on but disabled it should probably be some color other than blue...

Support use in reactive forms

BugSplat could use support here.

Support 2-Way Binding

If we follow the pattern @Input() x, @Output() xChange we can use 2-way binding!

https://angular.io/guide/two-way-binding

Angular 14