Angular 2/4 and TypeScript Dynamically Access/Append HTML Nodes

datatable.service.ts
====================

import { Injectable } from '@angular/core';

@Injectable()
export class DatatableService {

  constructor() { }

  getData(): Promise<any> {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(this.dataTableData);
     }, 100);
   });
 }

  dataTableData = [{
      'name': 'Vinod',
      'email': 'vinod@gmail.com',
      'regDate': '2017-01-09T14:48:34-08:00',
      'city': 'Delhi',
      'age': 34
  },
  {
      'name': 'Anita',
      'email': 'anita@gmail.com',
      'regDate': '2017-01-23T20:09:52-08:00',
      'city': 'Bangalore',
      'age': 32
  },
  {
      'name': 'Avnish',
      'email': 'avi@gmail.com',
      'regDate': '2017-11-19T19:11:33-08:00',
      'city': 'Pune',
      'age': 3
  }
 
  ];
}


datatable.component.ts
======================
import { Component, ElementRef } from '@angular/core';
import { DatatableService } from './datatable.service';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent{
data;
htmlText: string;
    tableShow:boolean = false;
   
  constructor(private service: DatatableService, private e:ElementRef) {
 this.service.getData().then((data) =>
 {
 this.data = data
 }
 )

 this.service.getData().then((data) => {
     this.data = data;
   });
  }
 
  toInt(num: string) {
      return +num;
  }

  sortByWordLength = (a: any) => {
      return a.city.length;
  }
 
  toggleShow(){
 if(!this.tableShow)
 this.tableShow = true;
 else
 this.tableShow = false;
  }
 
  rowClicked(e){
 console.log(e.target.parentElement);
 //this.e.nativeElement.appendChild(e.target.parentElement);
 this.e.nativeElement.childNodes[0].childNodes[1].appendChild(e.target.parentElement);
 console.log(this.e);
  }
}


datatable.component.html
========================

<div class="mainContainer">
<table>
<tr><td><input type="text" placeholder="<Enter>" (click)=toggleShow()><label for="male" (click)="toggleShow()">▼</label></td><td>Data1</td></tr>
<tr><td></td><td>Data2</td></tr>
<tr><td></td><td>Data3</td></tr>
</table>


<div *ngIf="tableShow" class="container">
<table (click)="toggleShow()">
   <tbody>
       <tr *ngFor="let item of data" (click)="rowClicked($event)">
           <td>{{item.name}}</td>
           <td>{{item.email}}</td>
           <td class="text-right">{{item.age}}</td>
           <td>{{item.city | uppercase}}</td>
       </tr>
   </tbody>
</table>
</div>
</div>

datatable.component.css
=======================
.mainContainer{
width:100%;
height:100%;
}
.container{
position: absolute;
    top: 35px;
    left: 13px;
    border: 3px solid #73AD21;
    background-color: #ffffff;
}

label{
position: absolute;
    top: 15px;
    left: 170px;
}
table {
border:solid 1px #006699;
}

table tr:hover{
background-color:#ddeeff;
}

td {
border:solid 1px #006699;
}