Angular 2 surrounding an input tag with div via directive

Question

I'm trying to create a directive which takes an input element and surrounds it with a div, so for example, my html would be something like:

<input type="text" class="form-control" inputWrapper />

and the desired outcome:

<div class="input-wrapper">
    <input type="text" class="from-control" />
</div>

Directive:

@Directive({
    selector: '[inputWrapper]'
})
export class InputWrapperDirective {
    constructor(private viewContainerRef: ViewContainerRef, private elementRef: ElementRef) {
        // what goes here?
    }
}

Answer 1

here is how you do it with a directive. The code uses Renderer2, which I think is Angular 4. Probably the same thing can be achieved with Renderer (which is marked deprecated now)

I did all the work in the ngAfterViewInit method. You may probably use the constructor instead.

import { Directive, Renderer2, ElementRef, AfterViewInit } from '@angular/core'

@Directive({
    selector: '[inputWrapper]'
})
export class InputWrapperDirective implements AfterViewInit {
    constructor(private _renderer:Renderer2, private _el: ElementRef) {

    }

    ngAfterViewInit() {
        // Get parent of the original input element
        var parent = this._el.nativeElement.parentNode;

        // Create a div
        var divElement = this._renderer.createElement("div");

        // Add class "input-wrapper"
        this._renderer.addClass(divElement, "input-wrapper");

        // Add the div, just before the input
        this._renderer.insertBefore(parent, divElement, this._el.nativeElement);

        // Remove the input
        this._renderer.removeChild(parent, this._el.nativeElement);

        // Remove the directive attribute (not really necessary, but just to be clean)
        this._renderer.removeAttribute(this._el.nativeElement, "inputWrapper"); 

        // Re-add it inside the div
        this._renderer.appendChild(divElement, this._el.nativeElement);

    }

}