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.