https://github.com/bobbyg603/ngx-toggle
😻📱📐 Beautiful iOS-style toggle switch for Angular
https://github.com/bobbyg603/ngx-toggle
angular bobbyg603 toggle toggle-switch typescript
Last synced: 2 months ago
JSON representation
😻📱📐 Beautiful iOS-style toggle switch for Angular
- Host: GitHub
- URL: https://github.com/bobbyg603/ngx-toggle
- Owner: bobbyg603
- License: mit
- Created: 2022-02-22T21:53:44.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T03:29:22.000Z (over 2 years ago)
- Last Synced: 2025-04-12T23:14:28.769Z (2 months ago)
- Topics: angular, bobbyg603, toggle, toggle-switch, typescript
- Language: TypeScript
- Homepage: https://bobbyg603.github.io/ngx-toggle
- Size: 713 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxToggle
A simple iOS style toggle switch for Angular projects.
## 🏗️ Installation
Install `@bobbyg603/ngx-toggle`:
```sh
npm i @bobbyg603/ngx-toggle
```
Import the `NgxToggleModule` module in each module that uses ``:
[app.module.ts](https://github.com/bobbyg603/ngx-toggle/blob/main/projects/ngx-toggle-example/src/app/app.module.ts)
```ts
import { NgxToggleModule } from '@bobbyg603/ngx-toggle';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxToggleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## 🧑💻 Usage
Add `` to your component's template:
[pricing.component.html](https://github.com/bobbyg603/ngx-toggle/blob/34b5da55ec9e5adf80bfa196cddb380c9d95314d/projects/ngx-toggle-example/src/app/pricing/pricing.component.html#L4-L6)
```html
```
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 `` as a [FormControl](https://angular.io/api/forms/FormControl):
[checkout.component.html](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.html#L71)
```html
```
[checkout.component.ts](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.ts#L10-L19)
```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\ | Emits new `checked` value when control has been toggled |
## 🤝 Attribution
The `ngx-toggle-example` layout was inspired by Benjamin King's [Pricing Cards](https://codepen.io/bballinben/pen/wyLjvm) codepen.