Switch

import { Component, signal } from '@angular/core';
import { PrismSwitchComponent } from '@devynelogic/prism-core';

@Component({
  selector: 'app-switch-example',
  imports: [PrismSwitchComponent],
  template: '<prism-switch [(checked)]="checked" />'
})
export class SwitchExampleComponent {
  checked = signal(false);
}

<prism-switch [(checked)]="checked" />
<prism-switch [(checked)]="checked" size="small" />

<prism-switch 
  [(checked)]="checked" 
  checkedChildren="ON" 
  unCheckedChildren="OFF" 
/>

<prism-switch 
  [(checked)]="checked" 
  [checkedChildren]="checkIcon" 
  [unCheckedChildren]="closeIcon" 
/>

<ng-template #checkIcon><i class="ri-check-line"></i></ng-template>
<ng-template #closeIcon><i class="ri-close-line"></i></ng-template>

export class MyComponent {
  isLoading = signal(false);
  isAccountActive = signal(false);

  onAccountToggle() {
    this.isLoading.set(true);
    // Simulate API call
    setTimeout(() => {
      this.isAccountActive.update(v => !v);
      this.isLoading.set(false);
    }, 2000);
  }
}

<prism-switch [loading]="true" [checked]="true" />
<prism-switch [disabled]="true" [checked]="false" />