# ng2-simple-toggle

> Angular (2-5) toggle (inpup[type=checkbox]) component. Supports Reactive Forms and NgModel

Latest version **1.0.0** (published 2018-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-simple-toggle
pnpm add ng2-simple-toggle
yarn add ng2-simple-toggle
bun add ng2-simple-toggle
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-03-23 |
| First published | 2018-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Igor Demo |
| Maintainers | igor.demo |
| Keywords | ng2, angular, toggle |

## Links

- npm: https://www.npmjs.com/package/ng2-simple-toggle
- Repository: https://github.com/demo-igor/ng2-simple-toggle
- Homepage: https://github.com/demo-igor/ng2-simple-toggle#readme
- Issues: https://github.com/demo-igor/ng2-simple-toggle/issues
- npm.io page: https://npm.io/package/ng2-simple-toggle

## Recent versions

- 1.0.0 (latest) — 2018-03-23
- 0.0.3 (next) — 2018-01-29
- 0.0.2 — 2018-01-29
- 0.0.1 — 2018-01-29

## README

# AngularX Simple Toggle

Works with Angular Final and AOT compilation

Just a `<input type="checkbox">` tag to work with Reactive Forms or NgModel in AngularX

## Quick start options

* Clone the repo: `git clone https://github.com/demo-igor/ng2-simple-toggle.git`.
* Install with [npm](https://www.npmjs.com): `npm install ng2-simple-toggle --save`.

## Usage

Import `SimpleToggleComponent` into your @NgModule.

```js
import { SimpleToggleModule } from 'ng2-simple-toggle';

@NgModule({
  // ...
  imports: [
    SimpleToggleModule,
  ]
  // ...
})
```

Define options in your consuming component:

```js
export class MyClass implements OnInit {
  toggleModel: boolean;

  ngOnInit() {
    this.toggleModel = true;
  }

  onChange() {
    console.log(this.optionsModel);
  }
}
```

In your template, use the component directive:

```html
<simple-toggle
  [(ngModel)]="optionsModel"
  (ngModelChange)="onChange($event)"
>
</simple-toggle>
```

## Customize

### Settings
| Setting Item          | Description                                | Default Value     |
| --------------------- | ------------------------------------------ | ----------------  |
| isRounded             | Rounded/squared toggle design              | true              |
| extraClass            | Additional class to change toggle styles   | ''                |

Import the `SimpleToggleSettings` interfaces to enable/override settings:

```js
// Default value
toggleModel: boolean = true;

// Settings configuration
mySettings: SimpleToggleSettings = {
  isRounded: false,
  extraClass: 'margin-10'
};
```

```html
<simple-toggle
  [(ngModel)]="optionsModel"
  (ngModelChange)="onChange($event)"
  [settings]="mySettings"
>
</simple-toggle>
```

## Other examples

### Use model driven forms with ReactiveFormsModule:

```js
export class MyClass implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      'someFlag'    : new FormControl(true, []),
    });

    this.myForm.controls['someFlag'].valueChanges
      .subscribe((val: boolean) => {
        // changes
      });
  }
```

```html
<form [formGroup]="myForm">
  <simple-toggle
    formControlName="someFlag"
  >
  </simple-toggle>
</form>
```

## License

[MIT]

---
_Source: https://npm.io/package/ng2-simple-toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._