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>

1 comment:

  1. JackpotCity Casino - Mapyro
    Find jackpot city and other slot machines in the United 순천 출장마사지 States. Slot 순천 출장안마 machine machines in Las 고양 출장안마 Vegas. 더킹카지노 도메인 1 Jackpot City Casino Slots. op 사이트 $0.99. Jackpot City Casino Slots. $7.00

    ReplyDelete

Thank You For Your Great Contribution

Featured Post

How to integrate okta with react / Implementing Okta authentication in a React app

 How to integrate okta with react /  Implementing Okta authentication in a React app for demo please follow  my git repo 1).Before starting ...

Popular Posts