Angular Slide Toggle Switch

A customizable and responsive slide toggle switch component for Angular. Users must drag the toggle from one end to the other to change its status. Designed for both desktop and mobile interfaces, with configurable styles, icons, and background text.

📦 Installation

npm i switch-slide

🚀 Usage

😮‍💨 Basic Use

<switch-slide-toggle></switch-slide-toggle>

✅ With Reactive Forms

<form [formGroup]="myForm">
    <switch-slide-toggle formControlName="switch" [options]="options">
        <span switch-icon-off class="material-icons">unpublished</span>
        <span switch-icon-on class="material-icons">check_circle</span>
    </switch-slide-toggle>
</form>

⚡ Without Reactive Forms

<switch-slide-toggle (changeValue)="changeValue($event)" [options]="options" [ngModel]="true">
    <span switch-icon-off class="material-icons">unpublished</span>
    <span switch-icon-on class="material-icons">check_circle</span>
</switch-slide-toggle>

⚙️ Configuration Options

The options input allows you to customize styles, icons, and background text using the following structure:

interface ToggleSwitchConfig {
    container?: {
        styles?: StyleProperties;
    };
    toggle?: {
        styles?: StyleProperties;
        iconOff?: ToggleIcon;
        iconOn?: ToggleIcon;
    };
    background?: {
        styles?: StyleProperties;
    };
    backgroundOn?: BackgroundText;
    backgroundOff?: BackgroundText;
}

🎨 Customization

• Use [options] to apply inline styles to different parts of the toggle.

📡 Events

• (changeValue) — Emits the current value (true or false) when the toggle changes.

✅ Default Options

{
    container: {
        styles: {
            height: "50px",
            background: "#ccc",
            "border-radius": "20px",
            "box-shadow": "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
        }
    },
    toggle: {
        styles: {
            width: "45px",
            height: "32px",
            background: "#fff",
            "border-radius": "15px",
            transition: "left 0.1s ease-in-out, box-shadow 0.2s",
            "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.3)"
        },
        iconOff: { value: "😒" },
        iconOn: { value: "😅" }
    },
    backgroundOn: {
        styles: { "margin": "0 10px 0 auto" },
        text: "ON"
    },
    backgroundOff: {
        styles: { "margin": "0 auto 0 10px" },
        text: "OFF"
    }
}