@soeren_balke/ng-builder
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1. The ng-builder is a module to dynamicly build components. This Tool wrapps the angular viewContainerRef. The Components are easy to develop and use with
99 lines • 11.5 kB
JavaScript
import { Component, ViewChild, ComponentFactoryResolver, Input, Output, EventEmitter } from '@angular/core';
import { NgBuilderDirective } from './ng-builder.directive';
export class NgBuilderComponent {
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.saveComponent = new EventEmitter();
}
set _componentList(value) {
if (value) {
this.componentList = value;
}
}
ngOnInit() {
this.viewContainerRef = this.builder.viewContainerRef;
this.renderdComonentList = [];
if (this.componentList && this.componentList.length > 0) {
this.update();
}
}
/**
* deprecated
*/
generateComponentList() {
this.update();
}
/**
* update rendert component list
*/
update() {
/**
* Add components
*/
for (const key in this.componentList) {
this.loadComponent(this.componentList[key], key);
}
/**
* Remove Components
*/
for (let i = (this.renderdComonentList.length - 1); i >= 0; i--) {
if (!this.componentList.includes(this.renderdComonentList[i])) {
if (this.viewContainerRef.get(i)) {
this.viewContainerRef.remove(i);
}
this.renderdComonentList.splice(i, 1);
}
}
}
clearComponentList() {
this.viewContainerRef.clear();
this.renderdComonentList = [];
}
loadComponent(component, index) {
if (this.renderdComonentList.includes(component)) {
const oldComponentIndex = this.renderdComonentList.indexOf(component);
if (index === oldComponentIndex) {
return;
}
const oldViewRef = this.viewContainerRef.get(oldComponentIndex);
this.viewContainerRef.move(oldViewRef, index);
this.renderdComonentList.splice(oldComponentIndex, 1);
this.renderdComonentList.splice(index, 0, component);
return;
}
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component.component);
const componentRef = this.viewContainerRef.createComponent(componentFactory, index);
const componentInstance = componentRef.instance;
if (component.data) {
componentInstance.data = component.data;
}
componentInstance.edit = component.edit;
componentInstance.saveEdit.subscribe(data => {
this.saveComponent.emit({
index: index,
component: component,
data: data
});
});
// this.renderdComonentList.push(component);
this.renderdComonentList.splice(index, 0, component);
}
}
NgBuilderComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-ng-builder',
template: `
<ng-template libBuilder>
</ng-template>
`
},] }
];
NgBuilderComponent.ctorParameters = () => [
{ type: ComponentFactoryResolver }
];
NgBuilderComponent.propDecorators = {
_componentList: [{ type: Input, args: ['componentList',] }],
saveComponent: [{ type: Output }],
builder: [{ type: ViewChild, args: [NgBuilderDirective, { static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYnVpbGRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiL1VzZXJzL3NvcmVuYmFsa2UvcHJvamVjdHMvbmctYnVpbGRlci9wcm9qZWN0cy9uZy1idWlsZGVyL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9uZy1idWlsZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFNBQVMsRUFBRSx3QkFBd0IsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBK0MsTUFBTSxlQUFlLENBQUM7QUFDakssT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFXNUQsTUFBTSxPQUFPLGtCQUFrQjtJQWtCN0IsWUFDVSx3QkFBa0Q7UUFBbEQsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUEwQjtRQUxsRCxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFNekMsQ0FBQztJQWRMLElBQ0ksY0FBYyxDQUFDLEtBQXlCO1FBQzFDLElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7U0FDNUI7SUFDSCxDQUFDO0lBV0QsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUFDO1FBQ3RELElBQUksQ0FBQyxtQkFBbUIsR0FBRyxFQUFFLENBQUM7UUFDOUIsSUFBRyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUN0RCxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7U0FDZjtJQUNILENBQUM7SUFFRDs7T0FFRztJQUNJLHFCQUFxQjtRQUMxQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUVEOztPQUVHO0lBQ0ksTUFBTTtRQUNYOztXQUVHO1FBQ0gsS0FBSyxNQUFNLEdBQUcsSUFBSSxJQUFJLENB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O1lBWHNDLHdCQUF3Qjs7OzZCQWtCNUQsS0FBSyxTQUFDLGVBQWU7NEJBUXJCLE1BQU07c0JBRU4sU0FBUyxTQUFDLGtCQUFrQixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBWaWV3Q2hpbGQsIENvbXBvbmVudEZhY3RvcnlSZXNvbHZlciwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q29udGFpbmVyUmVmLCBBZnRlckNvbnRlbnRJbml0LCBWaWV3UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0J1aWxkZXJEaXJlY3RpdmUgfSBmcm9tICcuL25nLWJ1aWxkZXIuZGlyZWN0aXZlJztcbmltcG9ydCB7IEJ1aWxkZXJDb21wb25lbnQgfSBmcm9tICcuL2J1aWxkZXItY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLW5nLWJ1aWxkZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxuZy10ZW1wbGF0ZSBsaWJCdWlsZGVyPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGAsXG4gIHN0eWxlczogW11cbn0pXG5leHBvcnQgY2xhc3MgTmdCdWlsZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWY7XG4gIHByaXZhdGUgcmVuZGVyZENvbW9uZW50TGlzdDogQnVpbGRlckNvbXBvbmVudFtdO1xuXG4gIHByaXZhdGUgY29tcG9uZW50TGlzdDogQnVpbGRlckNvbXBvbmVudFtdO1xuICBASW5wdXQoJ2NvbXBvbmVudExpc3QnKVxuICBzZXQgX2NvbXBvbmVudExpc3QodmFsdWU6IEJ1aWxkZXJDb21wb25lbnRbXSkge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgdGhpcy5jb21wb25lbnRMaXN0ID0gdmFsdWU7XG4gICAgfVxuICB9XG5cblxuICBAT3V0cHV0KCkgc2F2ZUNvbXBvbmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAVmlld0NoaWxkKE5nQnVpbGRlckRpcmVjdGl2ZSwgeyBzdGF0aWM6IHRydWUgfSkgYnVpbGRlcjogTmdCdWlsZGVyRGlyZWN0aXZlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY29tcG9uZW50RmFjdG9yeVJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXJcbiAgKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnZpZXdDb250YWluZXJSZWYgPSB0aGlzLmJ1aWxkZXIudmlld0NvbnRhaW5lclJlZjtcbiAgICB0aGlzLnJlbmRlcmRDb21vbmVudExpc3QgPSBbXTtcbiAgICBpZih0aGlzLmNvbXBvbmVudExpc3QgJiYgdGhpcy5jb21wb25lbnRMaXN0Lmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudXBkYXRlKCk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIGRlcHJlY2F0ZWRcbiAgICovXG4gIHB1YmxpYyBnZW5lcmF0ZUNvbXBvbmVudExpc3QoKSB7XG4gICAgdGhpcy51cGRhdGUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiB1cGRhdGUgcmVuZGVydCBjb21wb25lbnQgbGlzdFxuICAgKi9cbiAgcHVibGljIHVwZGF0ZSgpIHtcbiAgICAvKipcbiAgICAgKiBBZGQgY29tcG9uZW50c1xuICAgICAqL1xuICAgIGZvciAoY29uc3Qga2V5IGluIHRoaXMuY29tcG9uZW50TGlzdCkge1xuICAgICAgdGhpcy5sb2FkQ29tcG9uZW50KHRoaXMuY29tcG9uZW50TGlzdFtrZXldLCBrZXkpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFJlbW92ZSBDb21wb25lbnRzXG4gICAgICovXG4gICAgZm9yIChsZXQgaSA9ICh0aGlzLnJlbmRlcmRDb21vbmVudExpc3QubGVuZ3RoIC0gMSk7IGkgPj0gMDsgaS0tKSB7XG4gICAgICBpZighdGhpcy5jb21wb25lbnRMaXN0LmluY2x1ZGVzKHRoaXMucmVuZGVyZENvbW9uZW50TGlzdFtpXSkpIHtcbiAgICAgICAgaWYodGhpcy52aWV3Q29udGFpbmVyUmVmLmdldChpKSkge1xuICAgICAgICAgIHRoaXMudmlld0NvbnRhaW5lclJlZi5yZW1vdmUoaSk7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5yZW5kZXJkQ29tb25lbnRMaXN0LnNwbGljZShpLCAxKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBjbGVhckNvbXBvbmVudExpc3QoKSB7XG4gICAgdGhpcy52aWV3Q29udGFpbmVyUmVmLmNsZWFyKCk7XG4gICAgdGhpcy5yZW5kZXJkQ29tb25lbnRMaXN0ID0gW107XG4gIH1cblxuICBwcml2YXRlIGxvYWRDb21wb25lbnQoY29tcG9uZW50LCBpbmRleCkge1xuICAgIGlmICh0aGlzLnJlbmRlcmRDb21vbmVudExpc3QuaW5jbHVkZXMoY29tcG9uZW50KSkge1xuICAgICAgY29uc3Qgb2xkQ29tcG9uZW50SW5kZXggPSB0aGlzLnJlbmRlcmRDb21vbmVudExpc3QuaW5kZXhPZihjb21wb25lbnQpO1xuICAgICAgaWYoaW5kZXggPT09IG9sZENvbXBvbmVudEluZGV4KSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGNvbnN0IG9sZFZpZXdSZWY6IFZpZXdSZWYgPSB0aGlzLnZpZXdDb250YWluZXJSZWYuZ2V0KG9sZENvbXBvbmVudEluZGV4KTtcbiAgICAgIHRoaXMudmlld0NvbnRhaW5lclJlZi5tb3ZlKG9sZFZpZXdSZWYsIGluZGV4KTtcbiAgICAgIHRoaXMucmVuZGVyZENvbW9uZW50TGlzdC5zcGxpY2Uob2xkQ29tcG9uZW50SW5kZXgsIDEpO1xuICAgICAgdGhpcy5yZW5kZXJkQ29tb25lbnRMaXN0LnNwbGljZShpbmRleCwgMCwgY29tcG9uZW50KTtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBjb21wb25lbnRGYWN0b3J5ID0gdGhpcy5jb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIucmVzb2x2ZUNvbXBvbmVudEZhY3RvcnkoY29tcG9uZW50LmNvbXBvbmVudCk7XG5cbiAgICBjb25zdCBjb21wb25lbnRSZWYgPSB0aGlzLnZpZXdDb250YWluZXJSZWYuY3JlYXRlQ29tcG9uZW50KGNvbXBvbmVudEZhY3RvcnksIGluZGV4KTtcbiAgICBjb25zdCBjb21wb25lbnRJbnN0YW5jZSA9ICg8YW55PmNvbXBvbmVudFJlZi5pbnN0YW5jZSk7XG5cbiAgICBpZiAoY29tcG9uZW50LmRhdGEpIHtcbiAgICAgIGNvbXBvbmVudEluc3RhbmNlLmRhdGEgPSBjb21wb25lbnQuZGF0YTtcbiAgICB9XG5cbiAgICBjb21wb25lbnRJbnN0YW5jZS5lZGl0ID0gY29tcG9uZW50LmVkaXQ7XG4gICAgY29tcG9uZW50SW5zdGFuY2Uuc2F2ZUVkaXQuc3Vic2NyaWJlKGRhdGEgPT4ge1xuICAgICAgdGhpcy5zYXZlQ29tcG9uZW50LmVtaXQoe1xuICAgICAgICBpbmRleDogaW5kZXgsXG4gICAgICAgIGNvbXBvbmVudDogY29tcG9uZW50LFxuICAgICAgICBkYXRhOiBkYXRhXG4gICAgICB9KTtcbiAgICB9KTtcbiAgICAvLyB0aGlzLnJlbmRlcmRDb21vbmVudExpc3QucHVzaChjb21wb25lbnQpO1xuICAgIHRoaXMucmVuZGVyZENvbW9uZW50TGlzdC5zcGxpY2UoaW5kZXgsIDAsIGNvbXBvbmVudCk7XG4gIH1cblxufVxuIl19