Primitives
The textarea primitive can be used to enhance the accessibility of a textarea element and provide consistent interaction handling for hover, focus and press states.
Import the Textarea primitives from ng-primitives/textarea
.
import { NgpTextarea } from 'ng-primitives/textarea';
Assemble the textarea directives in your template.
<textarea ngpTextarea></textarea>
Create an textarea component that uses the NgpTextarea
directive.
import { Component } from '@angular/core';
import { Textarea } from './textarea';
@Component({
selector: 'app-root',
imports: [Textarea],
template: `
<textarea app-textarea placeholder="Enter your message"></textarea>
`,
})
export default class App {}
Generate a reusable textarea component using the Angular CLI.
ng g ng-primitives:primitive textarea
path
: The path at which to create the component file.prefix
: The prefix to apply to the generated component selector.componentSuffix
: The suffix to apply to the generated component class name.fileSuffix
: The suffix to apply to the generated component file name. Defaults to component
.exampleStyles
: Whether to include example styles in the generated component file. Defaults to true
.Here are some additional examples of how to use the Textarea primitive.
The textarea automatically integrates with the form field primitives.
Tell us about your favorite sandwich.
The following directives are available to import from the ng-primitives/textarea
package:
Whether the element is disabled.
[ngpTextarea]
ngpTextarea
The following data attributes are applied to the ngpTextarea
directive:
Attribute | Description |
---|---|
data-hover |
Applied when the element is hovered. |
data-focus |
Applied when the element is focused. |
data-disabled |
Applied when the element is disabled. |
Copyright © 2025 Angular Primitives