https://github.com/danielzotti/ng-textarea-autoresize
A special angular directive which autoresizes a textarea based on the content
https://github.com/danielzotti/ng-textarea-autoresize
angular autoresize textarea typescript
Last synced: 19 days ago
JSON representation
A special angular directive which autoresizes a textarea based on the content
- Host: GitHub
- URL: https://github.com/danielzotti/ng-textarea-autoresize
- Owner: danielzotti
- Created: 2019-07-24T11:01:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:05:37.000Z (over 3 years ago)
- Last Synced: 2025-10-05T11:27:58.254Z (8 months ago)
- Topics: angular, autoresize, textarea, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@danielzotti/ng-textarea-autoresize
- Size: 3.24 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @danielzotti/ng-textarea-autoresize
It's a special angular directive that autoresize a textarea based on the content.
Autoresize is triggered on:
- textarea content change
- model change
- window resize
## Get started
- [Live demo](https://danielzotti.github.io/ng-textarea-autoresize)
- [NPM](https://www.npmjs.com/package/@danielzotti/ng-textarea-autoresize)
- Try it yourself:
- Run `npm install`
- Run `npm run start` for a dev server
- Navigate to `http://localhost:4200/`
## How to use it
### Install the package
Run `npm i @danielzotti/ng-textarea-autoresize --save`
### Import the module
Import `NgTextareaAutoresizeModule` from `@danielzotti/ng-textarea-autoresize` in `app.module.ts`
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgTextareaAutoresizeModule } from "@danielzotti/ng-textarea-autoresize";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgFilemanagerModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
### Use it in a component
#### Basic template
- Easy to use
```html
```
#### Max height
- Set max height in pixels on `autoresizeMaxHeight` attribute
```html
```
#### Bind to model
- Bind textarea content to a variable on `autoresize` attribute
- Bind textarea max height to a variable on `autoresizeMaxHeight` attribute
```html
```
```typescript
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
maxHeight = 150; // pixels
text = "This is the text for the textarea!";
}
```