SlideToggle

The ui-slide-toggle component is an on/off control that can be toggled via clicking. It behaves similarly to a checkbox, but it does not support an indeterminate state. The slide-toggle uses the theme's accent color by default, but you can change it to 'primary' or 'warn'.

Table of Contents

• Installation
• Usage

Installation

To use the ui-slide-toggle component in your Angular application, you need to follow these steps:

npm install illyria-ui-slide-toggle

Usage

To use the ui-slide-toggle component in your Angular application, first, make sure you have imported the required module and component. For example, in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SlideToggleModule } from './illyria-ui-slide-toggle';

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

Now you can use the ui-slide-toggle module in your templates as shown in the section below

<ui-slide-toggle [(checked)]="isChecked" color="primary"></ui-slide-toggle>

The component accepts two input properties:

• color: Allows you to set the color of the slide-toggle. Possible values are 'accent' (default), 'primary', and 'warn'.
• checked: Binds the state of the slide-toggle. Set it to true for the 'on' state and false for the 'off' state.

In your component class, define the onToggle method to handle the event:

onToggle(checked: boolean) {
  // Handle the event logic here
}