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.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

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.