Angular 2 UI Switch - A Nice, Reusable Component!

1/14/2017

This is a great library that I like a lot: angular2-ui-switch. It's a clean toggle switch component reminiscent of old iPhone iOS 7 operating system. Here's a post on how to incorporate this library into your own Angular 2 projects.

Step 1) Install The Library

First, we need to install this npm library:

 npm install angular2-ui-switch --save

Step 2) Declare UiSwitchModule In Your Module's Imports

Now, add the Class UiSwitchModule into the "imports" array of your @NgModule like this:

import {UiSwitchModule} from "angular2-ui-switch";

@NgModule({
  declarations: [  
  ],
  imports: [
    UiSwitchModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent,
  ]
})
export class AppModule { }

Step 3) Use <ui-switch> In Your HTML

Once the library is properly set up you can use the <ui-switch> tag in your html template:

<ui-switch></ui-switch>

Step 4) Listen For Events In Component TypeScript Code When The Toggle Switch Is Pressed

Now that you have this fancy new toggle switch you'll probably want things in your application to happen when the user clicks to toggle it! First, we can add bindings to the click event and ngModel property in our ui-switch tag:

<ui-switch [(ngModel)]="toggleValue" (click)="toggleClicked()"></ui-switch>

Then in our component we can implement this function that gets triggered whenever the ui switch is clicked:

private toggleClicked () {
    console.log('the toggle has been clicked! ' + this.toggleValue);
}

Note that you could also listen for the change event since the value changes when this component is clicked:

<ui-switch (change)="onChange($event)"></ui-switch>

Decide How To Utilize This Awesome Toggle Switch!

I hope this post has convinced you how easy it is to add this sexy toggle slider into your Angular 2 project. At this point there's a new challenge; deciding how to incorporate these into your app. I'm using these right now in my profile, but I also have been known to put them in modals if I need to get a boolean value from the user. Hopefully your UI / UX people love these toggle switches and can put their creative minds to work replacing boring checkboxes and text inputs. Have fun (just don't go too crazy with the toggle switches hehe)!

Further Reference

You can find more information about the angular2-ui-switch library here:

npm page: https://www.npmjs.com/package/angular2-ui-switch
github page: https://github.com/yuyang041060120/angular2-ui-switch
demo page: http://yuyang041060120.github.io/angular2-ui-switch/

0 Comments