Angular2 dynamically added elements

Question

I'm trying to use the dynamic component provided by @GünterZöchbauer here Angular 2 dynamic tabs with user-click chosen components to create rows and columns. So far I got successfully the rows added but still can't get the columns created inside the rows.

Here is my code:

DesignerModule

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';

import { MaterializeModule } from '../../shared/materialize/materialize.module';

import { DesignerComponent } from './designer.component';

import { RowComponent } from './designer.component';
import { ColumnComponent } from './designer.component';

import { DynWrapperComponent } from './dyn-wrapper.component';


@NgModule({
  imports: [
    CommonModule,
    MaterializeModule,
  ],
  declarations: [
    DesignerComponent,
    DynWrapperComponent,
    RowComponent,
    ColumnComponent,
  ],
  entryComponents: [
    RowComponent,
    ColumnComponent,
  ],
  providers: [

  ]
})

export class DesignerModule {}

DynWrapperComponent

import { Component, Compiler, ViewContainerRef, ViewChild, Input, ElementRef,
         ComponentRef, ComponentFactory, ComponentFactoryResolver} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

// Helper component to add dynamic components
@Component({
  moduleId: module.id,
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DynWrapperComponent {
  @ViewChild('target', {read: ViewContainerRef}) target: any;
  @Input() type: any;
  cmpRef:ComponentRef<any>;
  private isViewInitialized:boolean = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private compiler: Compiler,
              private el: ElementRef) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }

    let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);

    //this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
    this.cmpRef = this.target.createComponent(factory)
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();    
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
  }
}

DesignerComponent

import { Component, ViewChild, ElementRef, ContentChildren } from '@angular/core';


@Component({
  moduleId: module.id,
  selector: 'my-row',
  templateUrl: 'row.component.html',
  styles: [
    `.row:hover {
        border: 3px dashed #880e4f ;
      }
    `
  ]
})

export class RowComponent {

  colIndex: number = 0;
  colList: Object[] = [];

  addColumn() {
    this.colList.splice(this.colIndex, 0, ColumnComponent);
    this.colIndex++;
  }

  removeColumn(colIdx: number) {
    this.colList.splice(colIdx, 1);
  }
}

@Component({
  moduleId: module.id,
  selector: 'my-column',
  templateUrl: 'column.component.html',
  styles: [
    `.col:hover {
        border: 3px solid  #304ffe;
      }
    `
  ]
})

export class ColumnComponent {

}

@Component({
  moduleId: module.id,
  selector: 'my-designer',
  templateUrl: 'designer.component.html',
})

export class DesignerComponent {
  @ViewChild('builder') builder:ElementRef;

  elementIndex: number = 0;

  list: Object[] = [];


   ngAfterViewInit() {

  }

  addRow() {
    this.list.splice(this.elementIndex, 0, RowComponent);

    this.elementIndex++;
  }

  remove(idx: number) {
    this.list.splice(idx, 1);
  }

}

DesignerComponent.html

<div #builder class="row">
  <div class="s1 teal lighten-2">
    <p class="flow-text">teste do html builder</p>

    <div *ngFor="let row of list; let idx = index" >
      <p class="flow-text">Linha {{idx}}</p>
      <dcl-wrapper [type]="row"></dcl-wrapper>

      <a class="btn-floating btn-small waves-effect waves-light purple" (click)="remove(idx)"><i class="material-icons">remove</i></a>
    </div>

  </div>

</div>
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a>

RowComponent.html

<div #row class="row">
  <div class="s12 teal lighten-2">
    <p class="flow-text">adicionando linha no html builder</p>
  </div>
  <div *ngFor="let col of colList; let colIndex = index">
    <p>Column</p>
    <dcl-wrapper [type]="col"></dcl-wrapper>
  </div>
  <a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a>
</div>

ColumnComponent.html

<div class="col s1 purple lighten-2">
  <p class="flow-text">column added ....</p>
</div>

This approach is generating the following error:

Expression has changed after it was checked. Previous value: 'CD_INIT_VALUE'. Current value:

Did it anyone get this working as nested elements?

Thanks very much for the help!

Answer 1

Try to use ngAfterContentInit hook instead of ngAfterViewInit in your DynWrapperComponent:

dyn-wrapper.component.ts

ngAfterContentInit() {
  this.isViewInitialized = true;
  this.updateComponent();    
}