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: npm install ng2-simple-toggle --save.

Usage

Import SimpleToggleComponent into your @NgModule.

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

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

Define options in your consuming component:

export class MyClass implements OnInit {
  toggleModel: boolean;

  ngOnInit() {
    this.toggleModel = true;
  }

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

In your template, use the component directive:

<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:

// Default value
toggleModel: boolean = true;

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

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

Other examples

Use model driven forms with ReactiveFormsModule:

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
      });
  }

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

License

[MIT]