@soeren_balke/ng-builder NPM

ng-builder

This project was generated with 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 data.

Use

npm install @soeren_balke/ng-builder --save

add your Builder Components

Create a module where you import the component that you use for the ng builder

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    ExampleOneComponent,
    // ...
  ],
  exports: [
    ExampleOneComponent,
    // ...
  ]
})

Import your and the ng builder module into your right module

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    ComponentListModule, // <-- your component module
    NgBuilderModule // <-- the ng builder module
  ],
  providers: [
    //...
  ]
})

create your component, which used in ng builder

component.ts

import { Builder } from '@soeren_balke/ng-builder';
export class ExampleOneComponent extends Builder implements OnInit {
}

extends Builder is for the requierd imputs and output.

Name	Type	Description
data	Input	(any) This is the data for the component. Use attributes to seperate each data.
edit	Input	(boolean - false) Enable the edit mode
saveEdit	Output	This event fire when you hit the save button. Only enable when edit mode is activate

component.html

<div>
  <img [src]="data.src || ''" alt="">
  <input type="text" *ngIf="edit" [(ngModel)]="data.src">
  <!-- or formControl ;) -->
</div>

<!-- This is the Edit Part -->
<div *ngIf="edit">
  <button (click)="saveEdit.emit(data)">
    save
  </button>
</div>

create Service to declare your builder components

export class ComponentListService {
  private componentList = [
    {
      component: ExampleOneComponent,
      displayName: 'Example One'
    },
    //...
  ];

  constructor() { }

  getComponentList() {
    return this.componentList;
  }
}

Use the ng-builder component app.component.ts

import { ViewChild } from '@angular/core';
import { NgBuilderComponent } from '@soeren_balke/ng-builder';

@ViewChild(NgBuilderComponent) ngBuilder: NgBuilderComponent;

constructor(
  private componentList: ComponentListService
) {}

ngOnInit()  {
  this.cList = this.componentList.getComponentList();
}

selectComponent(component) {
  // to use the the builde with content in the component:

  // this.ngBuilderComponentList.push({
  //   edit: false,
  //   data: {
  //     content: 'asdasd'
  //   },
  //   component: component
  // });

  this.ngBuilderComponentList.push({
    edit: true,
    component: component
  });

  this.ngBuilder.generateComponentList();
}

saveComponent(data) {
  console.log(data);
}

app.component.html

<lib-ng-builder 
  [componentList]="ngBuilderComponentList"
  (saveComponent)="saveComponent($event)">
</lib-ng-builder>

Attribute	Type	Description
componentList	BuilderComponent	{ component: any; edit: boolean; data?: any; }
saveComponent	EventErmitter	Fire when the build component fire his saveEdit Event