I am currently working on developing a framework and need to create a directive called cp-if. Unlike the existing cp-show directive, where I can simply change the visibility of an element to 'none' and then make it visible again, with the cp-if directive I need to dynamically create and delete DOM objects.
import {MapDom} from '../map-dom';
import {Common} from '../../common';
export class CPIf {
private element: any;
private map: MapDom;
private attribute;
private initialDisplay;
constructor(_element: HTMLElement, _map: MapDom) {
this.element = _element;
this.map = _map;
this.attribute = Common.getAttributeCpIf(this.element);
Common.getScope(this.element).$on('$onInit', () => this.init());
}
init() {
try {
Common.evalInContext(this.attribute, Common.getScope(this.element).scope) ? this.show() : this.hide();
} catch (ex) {
this.hide();
}
}
hide() {
this.element.remove()
}
show() {
console.log(this.element);
}
}
While I can remove the object from the DOM, I struggle to recover it when the action goes to the show() function.
I apologize if my explanation is not very clear.