Input

The input primitive can be used to enhance the accessibility of an input element and provide consistent interaction handling for hover, focus, press and autofill states.

Import

Import the Input primitives from ng-primitives/input.

import { NgpInput } from 'ng-primitives/input';

Usage

Assemble the input directives in your template.

<input ngpInput type="text" />

Reusable Component

Create an input component that uses the NgpInput directive.

Schematics

Generate a reusable input component using the Angular CLI.

ng g ng-primitives:primitive input

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

Here are some additional examples of how to use the Input primitive.

Input Form Field

The input automatically integrates with the form field primitives.

API Reference

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

NgpInput