An Angular directive that automatically adjusts the width of an input element to its content. Unlike other auto-grow directives, it is unique because it both shrinks and increases the width based on the content.

https://stackblitz.com/edit/ngx-autosize-input

npm install ngx-autosize-input

Add AutoSizeInputModule to your @NgModule imports:

import {AutoSizeInputModule} from 'ngx-autosize-input';

...

@NgModule({
  imports: [
    AutoSizeInputModule
  ]
})

Use directly in your HTML templates on an input element:

<input AutoSizeInput>

If using Bootstrap, set the directive to include borders so that the text is not cut off.

<input AutoSizeInput [includeBorders]=true>

The following parameters customize the directive.

Add extra width, in units of pixels.

Default Value: 0px

Example (add 10px):

<input AutoSizeInput [extraWidth]="10">

Set placeholder text width as minimum width; Note that [minimumWidth] will override this property.

Default Value: true

Example (turn off placeholder):

<input AutoSizeInput [includePlaceholder]="false">

Includes border width, so that text is not cut off. Note only even left and right borders are supported at this time.

Default Value: false

Example (turn on include borders):

<input AutoSizeInput [includeBorders]="true">

Includes padding width, so that text is not cut off.

Default Value: true

Example (turn off include padding):

<input AutoSizeInput [includePadding]="false">

Sets minimum width, in units of pixels.

Default Value: 0

Example (50px minimum width):

<input AutoSizeInput [minWidth]="50">

Sets maximum width, in units of pixels.

Default Value: 0

Example (100px maximum width):

<input AutoSizeInput [maxWidth]="100">

Sets parent width automatically, instead of input width. Useful when you need to update a parent's width.

Default Value: false

Example (input wrapped in an Angular Material form field component):

<mat-form-field> // This will be resized
   <input AutoSizeInput [setParentWidth]="true">
</mat-form-field>

Joshua Wright

This project is licensed under the MIT license. See the License file for more info.