@soeren_balke/ng-builder/fesm2015/soeren_balke-ng-builder.js

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

import { Directive, ViewContainerRef, EventEmitter, Component, ComponentFactoryResolver, Input, Output, ViewChild, NgModule } from '@angular/core';

class NgBuilderDirective {
    constructor(viewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
}
NgBuilderDirective.decorators = [
    { type: Directive, args: [{
                selector: '[libBuilder]'
            },] }
];
NgBuilderDirective.ctorParameters = () => [
    { type: ViewContainerRef }
];

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 },] }]
};

class NgBuilderModule {
}
NgBuilderModule.decorators = [
    { type: NgModule, args: [{
                imports: [],
                declarations: [
                    NgBuilderComponent,
                    NgBuilderDirective
                ],
                exports: [
                    NgBuilderComponent
                ]
            },] }
];

class Builder {
    constructor() {
        this.saveEdit = new EventEmitter();
    }
}
Builder.decorators = [
    { type: Directive }
];
Builder.ctorParameters = () => [];
Builder.propDecorators = {
    data: [{ type: Input }],
    edit: [{ type: Input }],
    saveEdit: [{ type: Output }]
};

/*
 * Public API Surface of ng-builder
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Builder, NgBuilderComponent, NgBuilderModule, NgBuilderDirective as ɵa };
//# sourceMappingURL=soeren_balke-ng-builder.js.map