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.
First, we need to install this npm library:
Now, add the Class UiSwitchModule into the "imports" array of your @NgModule like this:
Once the library is properly set up you can use the <ui-switch> tag in your html template:
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:
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...
Want FREE access to
my daily stock tips
"The Triple Gainers"?
Sign up here!