Skip to main content

​
Overview

The Switch component provides a toggle control for binary states. It’s similar to a checkbox but with a distinct sliding toggle interface, commonly used for settings and preferences.

​
Import

import { MagarySwitch } from 'ng-magary';

​
Basic Usage

import { Component } from '@angular/core';
import { MagarySwitch } from 'ng-magary';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagarySwitch],
  template: `
    <magary-switch
      label="Enable notifications"
      [(checked)]="notificationsEnabled"
      (change)="onToggle($event)"
    />
  `
})
export class DemoComponent {
  notificationsEnabled = false;

  onToggle(checked: boolean) {
    console.log('Notifications:', checked ? 'ON' : 'OFF');
  }
}

​
Properties

​
Inputs

​
checked
boolean
default:"false"
Two-way bindable checked state using signal-based model()
​
label
string
default:"''"
Label text displayed next to the switch
​
disabled
boolean
default:"false"
When true, switch is disabled and cannot be toggled
​
color
Color
default:"'primary'"
Color variant of the switch when checkedOptions: 'primary' | 'success' | 'danger' | 'warning' | 'info'

​
Outputs

​
change
EventEmitter<boolean>
Emitted when the checked state changes. Passes the new checked value.

​
Examples

​
Basic Switch

<magary-switch
  label="Dark mode"
  [(checked)]="darkMode"
/>

​
Without Label

<magary-switch [(checked)]="isEnabled" />

​
Color Variants

<magary-switch
  label="Primary"
  color="primary"
  [(checked)]="switch1"
/>

​
Disabled State

<magary-switch
  label="Disabled (off)"
  [checked]="false"
  [disabled]="true"
/>

​
With Change Handler

@Component({
  template: `
    <magary-switch
      label="Notifications"
      [(checked)]="notificationsEnabled"
      (change)="onNotificationChange($event)"
      color="success"
    />
  `
})
export class SettingsComponent {
  notificationsEnabled = true;

  onNotificationChange(enabled: boolean) {
    console.log('Notifications', enabled ? 'enabled' : 'disabled');
    this.saveSettings({ notifications: enabled });
  }

  saveSettings(settings: any) {
    // API call or local storage
  }
}

​
Settings Panel

@Component({
  template: `
    <div class="settings-panel">
      <h3>Privacy Settings</h3>
      
      <magary-switch
        label="Share analytics data"
        [(checked)]="settings.analytics"
        (change)="updateSettings()"
        color="primary"
      />
      
      <magary-switch
        label="Email notifications"
        [(checked)]="settings.emailNotifications"
        (change)="updateSettings()"
        color="info"
      />
      
      <magary-switch
        label="Two-factor authentication"
        [(checked)]="settings.twoFactor"
        (change)="updateSettings()"
        color="success"
      />
      
      <magary-switch
        label="Public profile"
        [(checked)]="settings.publicProfile"
        (change)="updateSettings()"
        color="warning"
      />
    </div>
  `
})
export class PrivacySettingsComponent {
  settings = {
    analytics: false,
    emailNotifications: true,
    twoFactor: false,
    publicProfile: false
  };

  updateSettings() {
    console.log('Settings updated:', this.settings);
    // Save to backend or local storage
  }
}

​
Conditional Features

@Component({
  template: `
    <magary-switch
      label="Advanced mode"
      [(checked)]="advancedMode"
      color="danger"
    />
    
    <div class="advanced-options" *ngIf="advancedMode">
      <magary-switch
        label="Developer tools"
        [(checked)]="devTools"
      />
      
      <magary-switch
        label="Debug mode"
        [(checked)]="debugMode"
      />
    </div>
  `
})
export class AdvancedComponent {
  advancedMode = false;
  devTools = false;
  debugMode = false;
}

​
Theme Toggle

@Component({
  template: `
    <magary-switch
      [label]="darkMode ? 'Dark mode' : 'Light mode'"
      [(checked)]="darkMode"
      (change)="toggleTheme($event)"
      color="primary"
    />
  `
})
export class ThemeToggleComponent {
  darkMode = false;

  toggleTheme(isDark: boolean) {
    document.body.classList.toggle('dark-theme', isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }

  ngOnInit() {
    // Load saved preference
    const savedTheme = localStorage.getItem('theme');
    this.darkMode = savedTheme === 'dark';
    if (this.darkMode) {
      document.body.classList.add('dark-theme');
    }
  }
}

​
Permission Controls

@Component({
  template: `
    <div class="permissions">
      <h3>App Permissions</h3>
      
      <magary-switch
        label="Camera access"
        [(checked)]="permissions.camera"
        [disabled]="!permissions.granted"
        color="success"
      />
      
      <magary-switch
        label="Location access"
        [(checked)]="permissions.location"
        [disabled]="!permissions.granted"
        color="info"
      />
      
      <magary-switch
        label="Microphone access"
        [(checked)]="permissions.microphone"
        [disabled]="!permissions.granted"
        color="warning"
      />
    </div>
  `
})
export class PermissionsComponent {
  permissions = {
    granted: true,
    camera: false,
    location: true,
    microphone: false
  };
}

​
Accessibility

The Switch component includes comprehensive accessibility features:
  • Keyboard Support: Space key to toggle
  • Focus Indicators: Clear visual focus states
  • Label Association: Proper label/input connection
  • ARIA Attributes: Role, checked state, and disabled state
  • Semantic HTML: Uses checkbox input with switch role

​
Keyboard Support

  • Space: Toggle checked state
  • Tab: Move focus to/from switch

​
Focus Management

The component tracks and displays focus state:
  • Visual focus ring when focused
  • Focus state maintained during keyboard navigation
  • Disabled switches cannot receive focus

​
State Management

The switch maintains its state using Angular signals: 
// Internal state signals
checked = model<boolean>(false);  // Two-way bindable
focused = signal(false);          // Focus state
disabled = input<boolean>(false); // Disabled state

​
Computed Classes

The component automatically applies CSS classes based on state: 
containerClasses = computed(() => {
  const classes = ['magary-switch-container'];
  if (this.disabled()) classes.push('switch-disabled');
  if (this.checked()) classes.push('switch-checked');
  if (this.focused()) classes.push('switch-focused');
  classes.push(`switch-${this.color()}`);
  return classes.join(' ');
});

​
Switch vs Checkbox

Use a Switch when:
  • Representing on/off states or settings
  • Changes take effect immediately
  • Used in settings panels or configuration screens
Use a Checkbox when:
  • Selecting multiple items from a list
  • Requiring explicit submission (forms)
  • Binary choices in forms or surveys

​
Component Details

  • Selector: magary-switch
  • Source: /home/daytona/workspace/source/projects/ng-magary/src/lib/Form/switch/switch.ts
  • Standalone: Yes (with CommonModule, FormsModule)
  • Change Detection: OnPush

​
Type Definitions

type Color = 'primary' | 'success' | 'danger' | 'warning' | 'info';

Build docs developers (and LLMs) love

Get started for freeTalk to us