@qrsln/utils
Version:
57 lines • 7.65 kB
JavaScript
import { Injectable } from '@angular/core';
import * as i0 from "@angular/core";
export class DomService {
constructor(viewContainerRef, appRef) {
this.viewContainerRef = viewContainerRef;
this.appRef = appRef;
}
GetComponentRef(component, componentProps) {
// 1. Create a component reference from the component
const componentRef = this.viewContainerRef.createComponent(component);
if (componentProps && typeof componentRef.instance === 'object') {
Object.assign(componentRef.instance, componentProps);
}
return componentRef;
}
AttachComponent(componentRef, element, asSibling = false) {
// 2. Attach component to the appRef so that it's inside the ng component tree
this.appRef.attachView(componentRef.hostView);
// 3. Get DOM element from component
const domElem = componentRef.hostView.rootNodes[0];
// 4. Append DOM element to the body
if (asSibling && element.parentNode) {
element.parentNode.insertBefore(domElem, element.nextSibling);
// console.log('append as Sibling', domElem);
}
else {
element.appendChild(domElem);
// console.log('appendChild', domElem);
}
}
Append(component, element, asSibling = true) {
const componentRef = this.GetComponentRef(component);
this.AttachComponent(componentRef, element, asSibling);
return componentRef;
}
Remove(componentRef) {
// 5. Wait some time and remove it from the component tree and from the DOM
try {
if (!!componentRef) {
this.appRef.detachView(componentRef.hostView);
componentRef.destroy();
return true;
}
return false;
}
catch {
return false;
}
}
}
DomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DomService, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
DomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DomService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DomService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ApplicationRef }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91dGlscy9TZXJ2aWNlcy9zcmMvRE9NL2RvbS5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxVQUFVLEVBQWtFLE1BQU0sZUFBZSxDQUFDOztBQUcxRyxNQUFNLE9BQU8sVUFBVTtJQUVyQixZQUFvQixnQkFBa0MsRUFBVSxNQUFzQjtRQUFsRSxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQVUsV0FBTSxHQUFOLE1BQU0sQ0FBZ0I7SUFDdEYsQ0FBQztJQUVPLGVBQWUsQ0FBQyxTQUFjLEVBQUUsY0FBdUI7UUFDN0QscURBQXFEO1FBQ3JELE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFdEUsSUFBSSxjQUFjLElBQUksT0FBTyxZQUFZLENBQUMsUUFBUSxLQUFLLFFBQVEsRUFBRTtZQUMvRCxNQUFNLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxRQUFrQixFQUFFLGNBQWMsQ0FBQyxDQUFDO1NBQ2hFO1FBRUQsT0FBTyxZQUFZLENBQUM7SUFDdEIsQ0FBQztJQUVPLGVBQWUsQ0FBQyxZQUFtQyxFQUFFLE9BQWdCLEVBQUUsWUFBcUIsS0FBSztRQUN2Ryw4RUFBOEU7UUFDOUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRTlDLG9DQUFvQztRQUNwQyxNQUFNLE9BQU8sR0FBSSxZQUFZLENBQUMsUUFBaUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFnQixDQUFDO1FBRTVGLG9DQUFvQztRQUNwQyxJQUFJLFNBQVMsSUFBSSxPQUFPLENBQUMsVUFBVSxFQUFFO1lBQ25DLE9BQU8sQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDOUQsNkNBQTZDO1NBQzlDO2FBQU07WUFDTCxPQUFPLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzdCLHVDQUF1QztTQUN4QztJQUNILENBQUM7SUFFRCxNQUFNLENBQUMsU0FBYyxFQUFFLE9BQWdCLEVBQUUsWUFBcUIsSUFBSTtRQUNoRSxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRXJELElBQUksQ0FBQyxlQUFlLENBQUMsWUFBWSxFQUFFLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztRQUV2RCxPQUFPLFlBQVksQ0FBQztJQUN0QixDQUFDO0lBRUQsTUFBTSxDQUFDLFlBQStCO1FBQ3BDLDJFQUEyRTtRQUMzRSxJQUFJO1lBQ0YsSUFBSSxDQUFDLENBQUMsWUFBWSxFQUFFO2dCQUNsQixJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQzlDLFlBQVksQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDdkIsT0FBTyxJQUFJLENBQUM7YUFDYjtZQUNELE9BQU8sS0FBSyxDQUFDO1NBQ2Q7UUFBQyxNQUFNO1lBQ04sT0FBTyxLQUFLLENBQUM7U0FDZDtJQUNILENBQUM7O3VHQXJEVSxVQUFVOzJHQUFWLFVBQVUsY0FERSxNQUFNOzJGQUNsQixVQUFVO2tCQUR0QixVQUFVO21CQUFDLEVBQUMsVUFBVSxFQUFFLE1BQU0sRUFBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7SW5qZWN0YWJsZSwgRW1iZWRkZWRWaWV3UmVmLCBBcHBsaWNhdGlvblJlZiwgQ29tcG9uZW50UmVmLCBWaWV3Q29udGFpbmVyUmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBJbmplY3RhYmxlKHtwcm92aWRlZEluOiAncm9vdCd9KVxyXG5leHBvcnQgY2xhc3MgRG9tU2VydmljZSB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZiwgcHJpdmF0ZSBhcHBSZWY6IEFwcGxpY2F0aW9uUmVmKSB7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIEdldENvbXBvbmVudFJlZihjb21wb25lbnQ6IGFueSwgY29tcG9uZW50UHJvcHM/OiBvYmplY3QpOiBDb21wb25lbnRSZWY8YW55PiB7XHJcbiAgICAvLyAxLiBDcmVhdGUgYSBjb21wb25lbnQgcmVmZXJlbmNlIGZyb20gdGhlIGNvbXBvbmVudFxyXG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gdGhpcy52aWV3Q29udGFpbmVyUmVmLmNyZWF0ZUNvbXBvbmVudChjb21wb25lbnQpO1xyXG5cclxuICAgIGlmIChjb21wb25lbnRQcm9wcyAmJiB0eXBlb2YgY29tcG9uZW50UmVmLmluc3RhbmNlID09PSAnb2JqZWN0Jykge1xyXG4gICAgICBPYmplY3QuYXNzaWduKGNvbXBvbmVudFJlZi5pbnN0YW5jZSBhcyBvYmplY3QsIGNvbXBvbmVudFByb3BzKTtcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gY29tcG9uZW50UmVmO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBBdHRhY2hDb21wb25lbnQoY29tcG9uZW50UmVmOiBDb21wb25lbnRSZWY8dW5rbm93bj4sIGVsZW1lbnQ6IEVsZW1lbnQsIGFzU2libGluZzogYm9vbGVhbiA9IGZhbHNlKTogdm9pZCB7XHJcbiAgICAvLyAyLiBBdHRhY2ggY29tcG9uZW50IHRvIHRoZSBhcHBSZWYgc28gdGhhdCBpdCdzIGluc2lkZSB0aGUgbmcgY29tcG9uZW50IHRyZWVcclxuICAgIHRoaXMuYXBwUmVmLmF0dGFjaFZpZXcoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcclxuXHJcbiAgICAvLyAzLiBHZXQgRE9NIGVsZW1lbnQgZnJvbSBjb21wb25lbnRcclxuICAgIGNvbnN0IGRvbUVsZW0gPSAoY29tcG9uZW50UmVmLmhvc3RWaWV3IGFzIEVtYmVkZGVkVmlld1JlZjxhbnk+KS5yb290Tm9kZXNbMF0gYXMgSFRNTEVsZW1lbnQ7XHJcblxyXG4gICAgLy8gNC4gQXBwZW5kIERPTSBlbGVtZW50IHRvIHRoZSBib2R5XHJcbiAgICBpZiAoYXNTaWJsaW5nICYmIGVsZW1lbnQucGFyZW50Tm9kZSkge1xyXG4gICAgICBlbGVtZW50LnBhcmVudE5vZGUuaW5zZXJ0QmVmb3JlKGRvbUVsZW0sIGVsZW1lbnQubmV4dFNpYmxpbmcpO1xyXG4gICAgICAvLyBjb25zb2xlLmxvZygnYXBwZW5kIGFzIFNpYmxpbmcnLCBkb21FbGVtKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGVsZW1lbnQuYXBwZW5kQ2hpbGQoZG9tRWxlbSk7XHJcbiAgICAgIC8vIGNvbnNvbGUubG9nKCdhcHBlbmRDaGlsZCcsIGRvbUVsZW0pO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgQXBwZW5kKGNvbXBvbmVudDogYW55LCBlbGVtZW50OiBFbGVtZW50LCBhc1NpYmxpbmc6IGJvb2xlYW4gPSB0cnVlKTogQ29tcG9uZW50UmVmPGFueT4ge1xyXG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gdGhpcy5HZXRDb21wb25lbnRSZWYoY29tcG9uZW50KTtcclxuXHJcbiAgICB0aGlzLkF0dGFjaENvbXBvbmVudChjb21wb25lbnRSZWYsIGVsZW1lbnQsIGFzU2libGluZyk7XHJcblxyXG4gICAgcmV0dXJuIGNvbXBvbmVudFJlZjtcclxuICB9XHJcblxyXG4gIFJlbW92ZShjb21wb25lbnRSZWY6IENvbXBvbmVudFJlZjxhbnk+KTogYm9vbGVhbiB7XHJcbiAgICAvLyA1LiBXYWl0IHNvbWUgdGltZSBhbmQgcmVtb3ZlIGl0IGZyb20gdGhlIGNvbXBvbmVudCB0cmVlIGFuZCBmcm9tIHRoZSBET01cclxuICAgIHRyeSB7XHJcbiAgICAgIGlmICghIWNvbXBvbmVudFJlZikge1xyXG4gICAgICAgIHRoaXMuYXBwUmVmLmRldGFjaFZpZXcoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcclxuICAgICAgICBjb21wb25lbnRSZWYuZGVzdHJveSgpO1xyXG4gICAgICAgIHJldHVybiB0cnVlO1xyXG4gICAgICB9XHJcbiAgICAgIHJldHVybiBmYWxzZTtcclxuICAgIH0gY2F0Y2gge1xyXG4gICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==