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:
Step 2) Declare UiSwitchModule In Your Module's Imports
Now, add the Class UiSwitchModule into the "imports" array of your @NgModule like this:
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:
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:
Then in our component we can implement this function that gets triggered whenever the ui switch is clicked:
Note that you could also listen for the change event since the value changes when this component is clicked:
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)!
You can find more information about the angular2-ui-switch library here:
The posts on this site are written and maintained by Jim Lynch. About Jim...