Toggle

Toggle a button on and off.

Import

Import the Toggle primitives from ng-primitives/toggle.

import { NgpToggle } from 'ng-primitives/toggle';

Usage

Assemble the toggle directives in your template.

<button ngpToggle [(ngpToggleSelected)]="selected">Toggle</button>

API Reference

The following directives are available to import from the ng-primitives/toggle package:

NgpToggle

Apply the ngpToggle directive to an element to manage the toggle state. This must be applied to a button element.

• Selector: [ngpToggle]
• Exported As: ngpToggle

Define the selected state. Define the disabled state. Event emitted when the selected state changes.

Data Attributes

The following data attributes are applied to the ngpToggle directive:

Attribute	Description	Value
data-selected	The selected state.	true | false
data-disabled	The disabled state.	true | false

Accessibility

Keyboard Interaction

• Space: Toggles the selected state.
• Enter: Toggles the selected state.