Toggle

Name: ng-oat
Author: SashiKumar Yadav

A button that can be pressed or unpressed — useful for toolbar actions and binary options.

Input	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	Visual variant
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Button size
`disabled`	`boolean`	`false`	Disabled state
`pressed`	`boolean`	`false`	Two-way bound pressed state
`toggleValue`	`string`	`''`	Value identifier for ToggleGroup

Import & Usage

typescript

import { Component, signal } from '@angular/core';
import { NgOatToggle } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatToggle],
  template: `
    <ng-oat-toggle [(pressed)]="isBold">
      <strong>B</strong>
    </ng-oat-toggle>
    <ng-oat-toggle variant="outline" [(pressed)]="isItalic">
      <em>I</em>
    </ng-oat-toggle>
  `,
})
export class ExampleComponent {
  isBold = signal(false);
  isItalic = signal(false);
}

Basic

Bold: false · Italic: false · Underline: false

html

<ng-oat-toggle [(pressed)]="isBold"><strong>B</strong></ng-oat-toggle>
<ng-oat-toggle [(pressed)]="isItalic"><em>I</em></ng-oat-toggle>
<ng-oat-toggle [(pressed)]="isUnderline"><u>U</u></ng-oat-toggle>

Outline Variant

html

<ng-oat-toggle variant="outline" [(pressed)]="a">Option A</ng-oat-toggle>
<ng-oat-toggle variant="outline" [(pressed)]="b">Option B</ng-oat-toggle>

Sizes

html

<ng-oat-toggle size="sm">Small</ng-oat-toggle>
<ng-oat-toggle>Default</ng-oat-toggle>
<ng-oat-toggle size="lg">Large</ng-oat-toggle>

Disabled

html

<ng-oat-toggle [disabled]="true" [pressed]="true">Locked On</ng-oat-toggle>