title: How to await for the appendchild
body: <p>i have a method called addcomponent which takes a component_factory and a target node  as arguments</p>
  
  <p>this dragdropservice.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>addComponent(componentClass: ComponentFactory&lt;any&gt;, target) {
      let componentRef: ComponentRef&lt;any&gt; = this.container.createComponent(componentClass);
      setTimeout(() =&gt; {
          target.appendChild(window.document.getElementById(componentRef.instance.index))
      }, 0);
  }
  </code></pre>
  
  <p>I'm using this method in dragging and dropping components and that's work fine but my problem is when invoking this method to reproduce saved components from the database . Some components are used as targets but the problem is with the settimeout . how to await for the ending of the setimeout  to add the next component  </p>
  
  <p>layoutcomposition.ts</p>
  
  <pre><code>ngOnInit() {
  
  
     this.route.queryParamMap.subscribe((paramMap: ParamMap) =&gt; {
    var id = paramMap.get('id');
    if (id) {
      console.log(id)
      this.savestate.getcomponents(id).subscribe(
        data =&gt; {
  
  
  
  
          for (var i = 0; i &lt; data['data'].length; i++) {
  
            if (data['data'][i].selector === 'app-col') {
  
  
              var colcomponent = new Col(this.factoryResolver)
              if (data['storetargetid'][i] === "content") { 
               this.dragDropService.addComponent(colcomponent.component,document.getElementById("content"))
  
              }
  else {
                    var arr =data['storetargetid'][i].split("-",2)
                    this.dragDropService.addComponent(colcomponent.component,document.getElementById(arr[0]).children[0].children[arr[1]])
  
              }
            }
  
  
  
          }
  </code></pre>
  
  <p>storetargetid is where i'm storing the ids of the targets when dropping components</p>