2.0.4 • Published 1 year ago

ngx-autosize v2.0.4

Weekly downloads
15,286
License
MIT
Repository
github
Last release
1 year ago

npm version License: MIT npm.io

ngx-autosize

ngx-autosize is an Angular2+ directive that automatically adjusts textarea height to fit its content.

It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea.

  • Production builds ready (AOT support)
  • Works with Ionic (shadow dom of v4 too)

Check the demo here

Installation:

angular 12+

npm install ngx-autosize

for angular <12

npm install ngx-autosize@1

Use Example:

Add the declaration to your @NgModule:
IMPORTANT !!! you need to do it for every module that will be autosizing textareas ;)

import {AutosizeModule} from 'ngx-autosize';

...

@NgModule({
  imports: [
    AutosizeModule
  ]
})

Use directly inside your HTML templates

<textarea autosize class="my-textarea">
    Hello, this is an example of Autosize in Angular2.
</textarea>
<ion-textarea autosize [(ngModel)]="text">
    And this is Ionic2 example
</ion-textarea>

Dynamically enable directive

<textarea [autosize]="true"></textarea> // Enabled (defalut)
<textarea [autosize]="false"></textarea> // Disabled

Settings

NameDefaultTypeDescription
minRowsintegerSets minimal amount of rows of the textarea
maxRowsintegerSets maximum rows count after which autosizing if turned off and scrollbar appears
onlyGrowfalsebooleanControls if autosize should make the textarea smaller. In other words... should empty lines be trimmed?
useImportantfalsebooleanControls if autosize should include !important in its height css styles. Should only need to be used if the height of the textarea is being overridden elsewhere

Example

<textarea autosize [minRows]="5" [maxRows]="10">
    Hello, this is an example of Autosize in Angular2.
</textarea>

Events / Outputs

NameDescription
resizedCalled whenever textarea has changes its size. New height as a param.

Example

<textarea autosize (resized)="onResized($event)">
    You need to implement 'onResized' yourself
</textarea>

Origins

This small lib is based on great http://stevepapa.com/angular2-autosize which is unfortunatelly not maintained and abandoned :(

Authors

Steve Papa Chrystian Ruminowicz

Licence

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

2.0.4

1 year ago

2.0.3

1 year ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0-next

2 years ago

2.0.0-next1

2 years ago

2.0.0-next2

2 years ago

2.0.0-next3

2 years ago

1.8.7

2 years ago

1.8.6

2 years ago

1.8.5

3 years ago

1.8.4

3 years ago

1.8.3

3 years ago

1.8.3-next

3 years ago

1.8.2-next

4 years ago

1.8.1-next

4 years ago

1.8.0

4 years ago

1.8.0-next

4 years ago

1.7.5

4 years ago

1.7.3

4 years ago

1.7.4

4 years ago

1.7.2-next

4 years ago

1.7.2

4 years ago

1.7.1-next

4 years ago

1.7.0-next

4 years ago

1.6.4

5 years ago

1.6.3

5 years ago

1.6.2

5 years ago

1.6.2-next

5 years ago

1.6.0

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.2-next

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.3.0-next

5 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.1-beta

6 years ago

1.1.0-beta

6 years ago

1.0.0

6 years ago