Angular2 - Get hold of dynamically created element - dom

Question

I am experimenting with dynamic element creation using Angular2 and I have the following code using Renderer:
Component
export class DesignerComponent {
#ViewChild('builder') builder:ElementRef;
renderer: Renderer;
constructor(private elementRef: ElementRef, private rend: Renderer)
{
this.renderer = rend;
}
ngAfterViewInit() {
}
addRow() {
this.renderer.createElement(this.builder.nativeElement,'div');
console.log(
`* ${this.builder.nativeElement.innerHTML}`);
}
}
HTML:
<div #builder class="row">
</div>
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a>
The 'div' gets created successfully but my question is: how do I get hold of that 'div' created dynamically?
I'm trying to get its reference so I can also create children in it. For instance: this div is a row and then I'd like to add columns to it.
Thanks very much for the help!
Update 1
My original code is this one
Component:
import { Component, ViewChild, ElementRef, Renderer} from '#angular/core';
#Component({
selector: 'c3',
template: `<h2>c3</h2>`
})
export class C3 {
}
#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[] = [];
rowId: number;
addColumn() {
this.colList.splice(this.colIndex, 0, ColumnComponent);
this.colIndex++;
}
removeColumn(colIdx: number) {
this.colList.splice(colIdx, 1);
}
setRowId(rowId: number) {
this.rowId = rowId;
}
}
#Component({
moduleId: module.id,
selector: 'my-column',
templateUrl: 'column.component.html',
styles: [
`.col:hover {
border: 3px solid #304ffe;
}
`
]
})
export class ColumnComponent {
row: RowComponent;
constructor(row: RowComponent) {
this.row = row;
}
removeColumn(colIdx: number) {
this.row.colList.splice(colIdx, 1);
}
}
#Component({
moduleId: module.id,
selector: 'my-site-designer',
templateUrl: 'sitedesigner.component.html',
styles: [`
nav {
height: 0px;
}
.side-nav {
width: 250px;
margin-top: 63px;
}
li.active {
color: #FFFFFF;
background-color: #1A237E;
}
li.active > a {
color: #FFFFFF;
background-color: #1A237E;
}
li.active > a > i{
color: #FFFFFF;
background-color: #1A237E;
}
/*
li.active i {
color: #FFFFFF;
background-color: #1A237E;
}
*/
`],
//template: `<p> teste teste</p>`
})
export class SiteDesignerComponent {
#ViewChild('builder') builder:ElementRef;
elementIndex: number = 0;
colIndex: number = 0;
list: Object[] = [];
colList: Object[] = [];
ngAfterViewInit() {
}
addRow() {
this.list.splice(this.elementIndex, 0, RowComponent);
this.elementIndex++;
}
remove(idx: number) {
this.list.splice(idx, 1);
}
}
HTML for the SiteDesignerComponent
<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>
HTML for the RowComponent
<div #row class="row" id="{{rowId}}">
<div class="s12 teal lighten-2">
<p class="flow-text">adding a row </p>
</div>
<div id="colunas" *ngFor="let col of colList; let colIndex = index">
<dcl-wrapper [type]="col"></dcl-wrapper>
<!--a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a-->
</div>
<a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a>
</div>
HTML for the ColumnComponent
<div class="col s4 purple lighten-2">
<p class="flow-text">adicionando coluna ....</p>
<a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a>
</div>
If I add two rows: the first with one column and the second with three columns and then if I remove the first row, it keeps the wrong columns (created in the second row). I know there is something wrong in the way I'm working the object arrays but I still can't figure it out.
Thanks for the help!

Answer 1

Got it solved.
updated HTML for the RowCompnent:
<div #row class="row" id="{{rowId}}">
<div class="s12 teal lighten-2">
<p class="flow-text">adicionando linha no html builder</p>
</div>
<div id="colunas" *ngFor="let col of colList; let colIndex = index">
<dcl-wrapper [type]="col"></dcl-wrapper>
<!--a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a-->
</div>
<a class="btn-floating btn-small waves-effect waves-light purple" (click)="removeRow()"><i class="material-icons">remove</i></a>
<a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a>
</div>
Updated RowComponent
export class RowComponent {
colIndex: number = 0;
colList: Object[] = [];
rowId: number;
selfRef: ElementRef;
selfRend: Renderer;
constructor(selfRef: ElementRef, selfRend: Renderer) {
this.selfRef = selfRef;
this.selfRend = selfRend;
}
addColumn() {
this.colList.splice(this.colIndex, 0, ColumnComponent);
this.colIndex++;
}
removeColumn(colIdx: number) {
this.colList.splice(colIdx, 1);
}
removeRow() {
this.selfRef.nativeElement.remove();
}
}
Thank you all for the help!