Created
December 11, 2017 13:06
-
-
Save osahner/68845caeeea5af487a3ae5eea004e6f1 to your computer and use it in GitHub Desktop.
Angular Wrapper Directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment