angular2 dynamic html insertion using directive

Question

I am trying to insert html using component, and I need to bind the newly created HTML element. Following is my code snippet.

whenever the user tries to enter text to the textarea, the textarea should grow without any scrollbar, when the focusout, it has to shrink to the given height or initial height along with a showmore button. On click of the showmore button invoke the showFull function.

    import {HostListener, Directive } from "@angular/core";

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

export class AutoGrowDirective {
    @HostListener('input', ['$event.target'])
    onInput(inputElement: HTMLTextAreaElement): void {
        this.growHeight(inputElement);
    }


@HostListener('focusout', ['$event.target'])
onFocusout(inputElement: HTMLTextAreaElement): void {
    this.shrinkHeight(inputElement);
}
@HostListener('focus', ['$event.target'])
onFocus(inputElement: HTMLTextAreaElement): void {
    this.showFull(inputElement);
}
private initialHeight: number = 0;
public growHeight(textArea:HTMLTextAreaElement): void {
    textArea.style.overflow = "hidden";
    this.setInitialHeight(textArea.offsetHeight);
    if(textArea.value.trim() == ""){
        textArea.style.height = "100px";
    } else if(textArea.scrollHeight > textArea.offsetHeight){
        textArea.style.height = (textArea.scrollHeight+10) + "px";
    }
}
public shrinkHeight(textArea:HTMLTextAreaElement): void {
    if(textArea.scrollHeight > this.initialHeight){
        let button: HTMLElement = document.createElement('button'); //, {id: 'textareaHeightChange', class: 'btn', type:""}
        button.id = 'textareaHeightChange';
        button.className = 'btn';
        button.textContent = 'Show More';
        // button.onclick = this.showFull2(); // on click invoke a function
        console.info(button);
        textArea.insertAdjacentElement('afterend',button); // insert this button only once
        // <button id="textareaHeightChange" class="btn" type="">Show More</button>

    }
    textArea.style.height = this.initialHeight + "px";
    textArea.style.overflow = "hidden";
}

public showFull(textArea:HTMLTextAreaElement): void {
    textArea.style.height = textArea.scrollHeight + "px";
}

private setInitialHeight(height:number):void {
    if(this.initialHeight == 0)
        this.initialHeight = height;
}
private getInitialHeight(): number{
    if(this.initialHeight != 0)
        return this.initialHeight;
}

Please someone throw me some lights. I am stuck from last two days.

Answer 1

Take use of class and directive create a class .auto-grow with css to grow your text area and following directive will add this class on focus and remove that class on removing focus or on blur.

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
    selector: '[autoGrow]',
})

export class AutoGrowDirective {
    private el: ElementRef;
    constructor(private _el: ElementRef, public renderer: Renderer) {
        this.el = this._el;
    }

    @HostListener('focus', ['$event']) onFocus(e) {
        this.renderer.setElementClass(this._el.nativeElement, 'auto-grow', true);
        return;
    }
    @HostListener('blur', ['$event']) onblur(e) {
        this.renderer.setElementClass(this._el.nativeElement, 'auto-grow', false);
        return;
    }

}