packages/eui/packages/components/eui-textarea/auto-resize.directive.ts
A directive that automatically adjusts the height of a textarea based on its content.
The AutoResizeDirective automatically adjusts the height of a textarea element as the user types, ensuring that all content is visible without requiring manual resizing or scrolling. It supports minimum and maximum row constraints and can be enabled/disabled dynamically.
Example :```html
<textarea autoResize [minRows]="2" [maxRows]="5"></textarea>
OnInit
OnChanges
AfterViewInit
OnDestroy
Selector | textarea[autoResize] |
Methods |
Inputs |
HostListeners |
Accessors |
autoResize |
Type : boolean
|
Default value : true
|
maxRows |
Type : number
|
Default value : 0
|
minRows |
Type : number | string
|
input |
Arguments : '$event.target'
|
Event handler for input events on the textarea. Triggers the resize calculation when the content changes. |
onInput |
onInput()
|
Decorators :
@HostListener('input', ['$event.target'])
|
Event handler for input events on the textarea. Triggers the resize calculation when the content changes.
Returns :
void
|
Public resize |
resize()
|
Calculates and sets the appropriate height for the textarea based on its content. This method creates a temporary clone of the textarea to measure the required height, taking into account minRows and maxRows constraints. The calculation process:
Returns :
void
|
minRows | ||||||||
setminRows(minRows: number | string)
|
||||||||
Sets the minimum number of rows for the textarea. This value determines the initial height of the textarea.
Parameters :
Returns :
void
|