An Angular.io compatible slide toggle with an icon inside ;)
VERY IMPORTANT: This component was created for Angular 5. It's not compatible with Angular 10+. Consider using Angular Material Slide Toggle instead (https://material.angular.io/components/slide-toggle/overview).
WARNING: Component properties have been changed from the 0.1.8 version. If you don't want to update your code, you should use 0.1.8 version.
Install
npm install simple-icon-toggle
Furthermore, you need to import Material icons (follow this guide http://google.github.io/material-design-icons/#icon-font-for-the-web);
Usage
-
Import it in your app.module.ts
;...... -
Use it in your app!
yourComponent.component.html:
yourComponent.component.ts:
...isToggleChecked = false;toggleOptions =;...
Component properties
mat-icon: the icon to place in the slide toggle's spot (default: notifications_active).
checked: variable representing toggle's status (default: false). It supports two-way data binding, so it will be automatically updated when there is a toggle event.
options: use this property to customize the aspect of the toggle (default values will be chosen if one or more options are not used).
- width: slider width, in px (default: 60).
- barColor: bar color when toggle is switched on, in css notation (e.g. rgba(255,0,0,0.8), default: lightgreen).
- spotColor: toggle's spot color in css notation (e.g. green, default: red).
- iconColor: icon color in css notation (e.g. rgba(255,255,255,.87), default: inherit).
Toggle
If you need to intercept the value in the exact moment when it changes, associate a setter to checked property, like the following snippet of code.
yourComponent.component.ts:
private _toggleChecked = false;get isToggleChecked set isToggleCheckednewValue