Switch

Toggle switches with labels. Supports ControlValueAccessor for forms.

InputTypeDefaultDescription
labelstring''Switch label text
checkedbooleanfalseInitial checked state
disabledbooleanfalseDisable the switch
OutputTypeDescription
changedbooleanEmitted with the new checked state

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatSwitch } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatSwitch],
  template: `
    <ng-oat-switch
      label="Dark Mode"
      [checked]="true"
      (changed)="onToggle($event)" />
  `,
})
export class ExampleComponent {
  onToggle(value: boolean) {
    console.log('Switch:', value);
  }
}

Basic Switches

html
<ng-oat-switch
  label="Notifications"
  [checked]="true"
  (changed)="onToggle($event)" />

<ng-oat-switch label="Dark Mode" (changed)="onToggle($event)" />

Disabled States

html
<ng-oat-switch label="Disabled off" [disabled]="true" />
<ng-oat-switch label="Disabled on" [checked]="true" [disabled]="true" />