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>

Reusable Component

Create a reusable component that uses the toggle directives.

Schematics

Generate a reusable toggle component using the Angular CLI.

ng g ng-primitives:primitive toggle

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Default Selected

Use ngpToggleDefaultSelected to set the initial selected state in uncontrolled mode.

API Reference

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

NgpToggle

Accessibility

Keyboard Interaction

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