Toggle Group

Name: ng-oat
Author: SashiKumar Yadav

Groups multiple toggle buttons with single or multi-select behavior and connected styling.

Input	Type	Default	Description
`multiple`	`boolean`	`false`	Allow multi-select
`disabled`	`boolean`	`false`	Disabled state
`value`	`string`	`''`	Selected value(s), comma-separated for multiple

Import & Usage

typescript

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

@Component({
  selector: 'app-example',
  imports: [NgOatToggle, NgOatToggleGroup],
  template: `
    <ng-oat-toggle-group [(value)]="alignment">
      <ng-oat-toggle toggleValue="left">Left</ng-oat-toggle>
      <ng-oat-toggle toggleValue="center">Center</ng-oat-toggle>
      <ng-oat-toggle toggleValue="right">Right</ng-oat-toggle>
    </ng-oat-toggle-group>

    <!-- Multi-select -->
    <ng-oat-toggle-group [multiple]="true" [(value)]="formats">
      <ng-oat-toggle toggleValue="bold"><strong>B</strong></ng-oat-toggle>
      <ng-oat-toggle toggleValue="italic"><em>I</em></ng-oat-toggle>
    </ng-oat-toggle-group>
  `,
})
export class ExampleComponent {
  alignment = signal('center');
  formats = signal('');
}

Single Select

Alignment: center

html

<ng-oat-toggle-group [(value)]="alignment">
  <ng-oat-toggle toggleValue="left">Left</ng-oat-toggle>
  <ng-oat-toggle toggleValue="center">Center</ng-oat-toggle>
  <ng-oat-toggle toggleValue="right">Right</ng-oat-toggle>
</ng-oat-toggle-group>

Multi Select

Formats: bold

html

<ng-oat-toggle-group [multiple]="true" [(value)]="formats">
  <ng-oat-toggle toggleValue="bold"><strong>B</strong></ng-oat-toggle>
  <ng-oat-toggle toggleValue="italic"><em>I</em></ng-oat-toggle>
  <ng-oat-toggle toggleValue="underline"><u>U</u></ng-oat-toggle>
  <ng-oat-toggle toggleValue="strike"><s>S</s></ng-oat-toggle>
</ng-oat-toggle-group>

Outline Variant

View: (none)

html

<ng-oat-toggle-group [(value)]="view">
  <ng-oat-toggle toggleValue="grid" variant="outline">Grid</ng-oat-toggle>
  <ng-oat-toggle toggleValue="list" variant="outline">List</ng-oat-toggle>
  <ng-oat-toggle toggleValue="board" variant="outline">Board</ng-oat-toggle>
</ng-oat-toggle-group>