How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

How to create Textbox auto size and after type some line autometically added scroll 



How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

Code:-


// Usage example: <textarea autoresize></textarea>

import { ElementRefHostListenerDirectiveAfterContentChecked } from '@angular/core';

@Directive({
    selector: 'textarea[autosize]'
})

export class AutosizeDirective implements AfterContentChecked {
    @HostListener('input', ['$event.target'])
    onInput(textAreaHTMLTextAreaElement): void {
        this.adjust();
    }
    constructor(public elementElementRef) {
    }
    ngAfterContentChecked(): void {
        this.adjust();
    }
    adjust(): void {
        const element = this.element.nativeElement;
        const maxsize = 188;
        const bottompadding = 1;
        if (element.scrollHeight <= maxsize) {
            element.style.overflow = 'hidden';
            element.style.height = 'auto';
            element.style.height = (element.scrollHeight - bottompadding) + 'px';
        } else {
            element.style.overflow = 'auto';
            element.style.height = maxsize + 'px';
        }
    }
}


Uses:-
 <textarea matInput placeholder="Address" cols="20" id="Address" name="Address" formControlName="Address"
                  rows="1" maxlength="500" autosize></textarea>

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

How to sent authorized header attribute value using c# .net httpclient for third party api call of oauth 2.0

How to sent authorized header attribute value using C# .NET HTTP client for third party API call of OAuth 2.0 For call token From Authorized...

Popular Posts