CngxAutosize

DirectivePrimaryv0.1.0WCAG AA

projects/forms/input/autosize.directive.ts

Import#

import { CngxAutosize } from '@cngx/forms/input'

Description#

Auto-resize textarea based on content.

Signal-first alternative to cdkTextareaAutosize. Measures via the scrollHeight trick and reacts to input events + ResizeObserver for programmatic value changes.

<textarea cngxAutosize [minRows]="2" [maxRows]="10" #auto="cngxAutosize"></textarea>
<span>Height: {{ auto.height() }}px</span>

https://cngxjs.github.io/cngx/examples/#/forms/input/autosize/basic-autosize https://cngxjs.github.io/cngx/examples/#/forms/input/autosize/min-max-rows

Metadata#

Selector: textarea[cngxAutosize]
Export as: cngxAutosize

Host#

Bound styles: overflow-y ← overflowY resize ← "none" box-sizing ← "border-box"
Listeners: input → resize

Index#

Inputs#

maxRows#number | undefined

input()

Maximum number of rows. undefined = unlimited. When configured below minRows, the minimum wins - same resolution CSS applies between min-height and max-height.

minRows#number

input()

Minimum number of rows.

default 1

Instance Properties#

height#Signal

Readonly

Current computed height in px.

this.heightState.asReadonly()

Methods#

resize#void

Force recalculation of the textarea height.

HostBindings#

Binding	Expression
`[style.overflow-y]`	`overflowY()`
`[style.resize]`	`"none"`
`[style.box-sizing]`	`"border-box"`

HostListeners#

Event	Handler
`(input)`	`input()`

CngxAutosize

Import#

Description#

Related#

Metadata#

Host#

Index#

Properties

Methods

Inputs

HostBindings

HostListeners

Inputs#

Instance Properties#

Methods#

HostBindings#

HostListeners#