Run the CLI
Use the CLI to add the component to your project.
Toggle Group
A set of two-state buttons that can be pressed or released. Multiple buttons can be selected at the same time.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardToggleGroupComponent, type ZardToggleGroupItem } from '../toggle-group.component';
@Component({
selector: 'demo-toggle-group-default',
standalone: true,
imports: [ZardToggleGroupComponent],
template: ` <z-toggle-group zMode="multiple" [items]="items" [defaultValue]="['italic']" (valueChange)="onToggleChange($event)"></z-toggle-group> `,
})
export default class ToggleGroupDefaultComponent {
items: ZardToggleGroupItem[] = [
{
value: 'bold',
icon: 'bold',
ariaLabel: 'Toggle bold',
},
{
value: 'italic',
icon: 'italic',
ariaLabel: 'Toggle italic',
},
{
value: 'underline',
icon: 'underline',
ariaLabel: 'Toggle underline',
},
];
onToggleChange(value: string | string[]) {
console.log('Toggle group changed:', value);
}
}
with text
import { Component } from '@angular/core';
import { ZardToggleGroupComponent, type ZardToggleGroupItem } from '../toggle-group.component';
@Component({
selector: 'demo-toggle-group-with-text',
standalone: true,
imports: [ZardToggleGroupComponent],
template: ` <z-toggle-group zMode="multiple" [items]="items" [defaultValue]="['italic']" (valueChange)="onToggleChange($event)"></z-toggle-group> `,
})
export default class ToggleGroupWithTextComponent {
items: ZardToggleGroupItem[] = [
{
value: 'bold',
icon: 'bold',
label: 'Bold',
ariaLabel: 'Toggle bold',
},
{
value: 'italic',
icon: 'italic',
label: 'Italic',
ariaLabel: 'Toggle italic',
},
{
value: 'underline',
icon: 'underline',
label: 'Underline',
ariaLabel: 'Toggle underline',
},
];
onToggleChange(value: string | string[]) {
console.log('Selected formatting:', value);
}
}