How to make it work with angular 4?

[abhishekdgeek]

Hi,

I have used this plugin earlier and wanted to do the same again in my Angular 4 project but I am not sure how to use the function in my component file after view initialisation.

Any help here is much appreciated.

Thanks.

[jackmoore]

Sorry, I have no idea.

[zhumengjia]

declare var autosize;

[maxfahl]

I just created a simple directive for autosize like:

import * as autosize from 'autosize';
import { Directive, ElementRef, OnInit, OnDestroy, Input } from '@angular/core';

@Directive({ selector: '[autosize]' })
export class AutosizeDirective implements OnInit, OnDestroy {

	@Input('autosize')
	enabled: boolean = true;

	constructor(private el: ElementRef) {
	}

	ngOnInit(): void {
		if (this.enabled)
			autosize(this.el.nativeElement);
	}

	public update() {
		if (this.enabled) {
			// We need to skip a tick to make this work.
			window.setTimeout(() => {
				(<any>autosize).update(this.el.nativeElement);
			}, 0);
		}
	}

	ngOnDestroy(): void {
		(<any>autosize).destroy(this.el.nativeElement);
	}
}

After that I just add this directive to and textarea like this:

<textarea #textInput
		  autosize
		  name="text"
		  [disabled]="disabled"

I hope this helps you @abhishekdgeek !

[ednjv]

Thanks @maxfahl !

[wgrabowski]

@maxfahl there is a @types/autosize package as well so you don't have to cast autosize to

[maxfahl]

@wgrabowski I'm sure there is. This is just an old example. But people using my example might have good use of the typings.