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.