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

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

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

2. Import your and the ng builder module into your right module

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

3. 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>

4. create Service to declare your builder components

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

  constructor() { }

  getComponentList() {
    return this.componentList;
  }
}

5. 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 |

Dev

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Publish

Run npm run lib:build to build the aot of library. Run npm run lib:prod to publish the build lib.

Example

Live Example: https://stackblitz.com/github/samy-blake/ng-builder