title: How viewChild can get elements that added with js in angular2?
body: <p>If a HTML element has been added to the DOM(for example after click on button),  How can we access this element? viewChild can't see that.</p>
  
  <p><strong>Update 1:</strong> More description</p>
  
  <p>I've used jquery datatable (<a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery.dataTables" rel="nofollow noreferrer">jquery.dataTables definitelyTyped version</a>). Base on <a href="https://datatables.net/examples/advanced_init/column_render.html" rel="nofollow noreferrer">this</a> link, I can add new column and define html inside that. I wrote this code :</p>
  
  <pre><code>           columnDefs: [
                      {
                          render: function (data, type, row) {
                              return `
                                    &lt;a href="admin/edituser/` + row.UserId+ `" class="btn btn-outline btn-circle btn-sm green"&gt;&lt;i class="fa fa-edit" &gt; &lt;/i&gt; Edit &lt;/a&gt;`+
                                   `&lt;a [routerLink]="['Delete']" class="btn btn-outline btn-circle btn-sm red"&gt;&lt;i class="fa fa-trash-o" &gt; &lt;/i&gt; Delete &lt;/a&gt;
                                              `;
                          },
                          targets: 5
                      },
                  ],
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bBNUU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBNUU.png" alt="enter image description here"></a></p>
  
  <p>With Chrome Developer tools I see this :
  <a href="https://i.stack.imgur.com/gZjKG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gZjKG.png" alt="enter image description here"></a></p>
  
  <p>First anchor tag works but with href, not routerLink.</p>
  
  <p>Second anchor tag doesn't work because angular directives didn't complie to href.</p>
  
  <p>I tried to use DynamicComponentLoader to compile it, and changed code like this:
  <a href="https://i.stack.imgur.com/TCtA9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TCtA9.png" alt="enter image description here"></a></p>
  
  <p>But I can't access #target element with viewChild.(I want to change it with another component by loadNextToLocation). I think this isn't optimize way to get good result.</p>
  
  <p>I want to use routerLink with commands buttons inside jquery datatable.</p>
  
  <p>Could you please help me in the right direction to solve this?</p>
  
  <p>Thank you in advance.</p>
  
  <h1>solution :</h1>
  
  <p>If you want to add HTML to DOM with javascript or some callback function first determine a tag from template that can be a parent for those element(s) in future.</p>
  
  <ol>
  <li><p>Add template variable to this parent element.(#target for example)
  </p>
  
  <p>
              
                  </p>
  
  <pre><code>                &lt;th&gt; Email&lt;/th&gt;
                  &lt;th&gt; Date &lt;/th&gt;
                  &lt;th&gt; Phone &lt;/th&gt;
                  &lt;th&gt; Commands&lt;/th&gt;
  
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody #target&gt;&lt;/tbody&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
  
                  &lt;th&gt;  &lt;/th&gt;
                  &lt;th&gt;  &lt;/th&gt;
                  &lt;th&gt;  &lt;/th&gt;
                  &lt;th&gt;  &lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  </code></pre></li>
  <li><p>Then add a simple class and a simple attribute to your html code(This code is generated after page compiled with angular,Also you can write some code with typescript or javascript to generate html).</p>
  
  <pre><code>   columnDefs: [
                  {
                      render: function (data, type, row) {
                          return `
                               `&lt;a date-id="` + row.UserId + `" class="editbtn btn btn-outline btn-circle btn-sm red"&gt; Edit&lt;/a&gt;
                               `;
                      },
                      targets: 5
                  },
              ],
  </code></pre></li>
  <li><p>Now import and inject these sources to your component:</p>
  
  <pre><code>    import {ViewChild, Renderer} from '@angular/core';
  </code></pre>
  
  <p>and :</p>
  
  <pre><code>    constructor(private renderer: Renderer, private router: Router)
  </code></pre></li>
  <li><p>Define a viewChild variable in your component class:</p>
  
  <pre><code>    @ViewChild('target') target;
  </code></pre></li>
  <li><p>Write a function like this :</p>
  
  <pre><code>public AfterEverything() {
         var el: HTMLElement = this.target.nativeElement;//Make an Element Object
         console.log(el);
         var commands: NodeListOf&lt;Element&gt; = el.getElementsByClassName('editbtn');//Find Element Object to get all elements with a specefic class
         console.log(commands);
         for (var i = 0; i &lt; commands.length; i++) {
             //Loop for add event or style
             console.log(commands[i]);
             //Sample event(Click for routing)
             this.renderer.listen(commands[i], 'click', (event: Event) =&gt; {
                 var thisid = event.srcElement.getAttribute("date-id");//Get value from element
                 console.log(thisid);
                 this.router.parent.navigate(['EditUser', { id: thisid }]);//Use value to make routeLink
                 console.log(event.srcElement.innerHTML);
             });
             this.renderer.setElementStyle(commands[i], 'backgroundColor', 'yellow');//for change color(just sample)
         }
  </code></pre>
  
  <p>}</p></li>
  <li><p>You must find best place to call this function,for example, ajax data callback is one choice and call AfterEverything() inside that. You can call this function inside ngAfterViewInit(). </p></li>
  </ol>
  
  <p><strong>Note that sometimes a delay of several seconds is necessary to ensure that all new elements are created.</strong></p>