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-inputAdd 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.