title: Angular2 add HTML to dynamic elements
body: <p>I have this code:</p>
  
  <pre><code>import { Component, ElementRef, Renderer2 } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: '&lt;button (click)="runR()"&gt;Run&lt;/button&gt;
  &lt;div class="testme"&gt;
      &lt;div class="somediv"&gt;
          &lt;div class="dynamically_created_div unique_identifier"&gt;&lt;/div&gt;
          &lt;div class="dynamically_created_div unique_identifier"&gt;&lt;/div&gt;
          &lt;div class="dynamically_created_div unique_identifier"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;',
  })
  
  export class AppComponent{
      hostEl: any;
  
      constructor(
          private el:ElementRef,
          private renderer:Renderer2,
      )  {
          this.hostEl = el.nativeElement;
      }
  
      runR(){
          let change_this;
          change_this= this.renderer.createElement('span');
          this.renderer.addClass(change_this, 'change_this');
          this.renderer.appendChild(this.hostEl, change_this);      
      }
  
  }
  </code></pre>
  
  <p>Is there any way in <strong>Angular2</strong> to add HTML to the <code>.dynamically_created_div</code>?
  Because the above only adds to the end of the HTML of the component.</p>
  
  <p>I also tried with:</p>
  
  <pre><code>import { Component, ElementRef, ViewChild, Renderer, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `&lt;button (click)="runR()"&gt;Run&lt;/button&gt;
  &lt;div class="testme"&gt;
      &lt;div class="somediv"&gt;
          &lt;div class="dynamically_created_div"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
    `,
  })
  export class AppComponent {
    constructor(private renderer:Renderer) {}
  
      runR() {
          @ViewChild('dynamically_created_div') d1:ElementRef;
          this.renderer.invokeElementMethod(this.d1.nativeElement, 'insertAdjacentHTML', ['beforeend', '&lt;div class="new_div"&gt;new_div&lt;/div&gt;'] );
      }
  
  }
  </code></pre>
  
  <p>But it's not working because the @ViewChild directive must be outside the function and I can't have control over it anymore</p>
  
  <p>I also tried like this: </p>
  
  <pre><code>&lt;div class="dynamically_created_div" [innerHtml]="newHTML"&gt;&lt;/div&gt;
  this.newHTML = '&lt;div class="new_div"&gt;new_div&lt;/div&gt;';
  </code></pre>
  
  <p>Thing I cannot do because my content is dynamic and uses unique IDs and I cannot use [innerHtml] dynamically ( it only works for what I put in themplate for the first time, then anything else that changes can't use innerHtml anymore.</p>
  
  <p>I checked <a href="https://stackoverflow.com/questions/38093727/angular2-insert-a-dynamic-component-as-child-of-a-container-in-the-dom">Angular2: Insert a dynamic component as child of a container in the DOM</a> but there is the same problem, the placeholders aren't dynamic</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>My code is a little bit more complex:</p>
  
  <p>TS:</p>
  
  <pre><code>import { AfterContentInit, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
  import { NgForm, FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
  import { SFService } from '../services/sf.service';
  import { Injectable, Pipe, PipeTransform } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      providers: [ SFService ],
  })
  
  export class AppComponent implements OnInit {
      constructor(
          private sfservice: SFService,
      ) {}
  
      ngOnInit(){
          this.sfservice.getMembers().subscribe(members =&gt; {
              this.members = members.members;
          });
      }
  
  
      members: Member[];
      member_selector: Member[];
  
      member_each: Member;
      member_selector_each: Member[];
      cases: Case;
  
      runR(){
  
          this.members.forEach(member_each =&gt; {
              this.member_selector.forEach(member_selector_each =&gt; {
                  if(member_each.Id === member_selector_each.Id){
                      console.log(member_selector_each.Id);
                      this.sfservice.getCaseHistory(member_selector_each.Id, "2017-04-25T00:00:00", "2017-04-28T23:59:59").subscribe(cases =&gt; {
  
                          this.member_each['cases'] = cases;
                          console.log(this.member_each);
                      });
                  }
              })
          })
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form #myForm="ngForm" novalidate&gt;
      &lt;select name="member_selector_name" [(ngModel)]="member_selector" multiple ng-model="selectedValues" style="height:200px;"&gt;
          &lt;option *ngFor="let member of members" [ngValue]="member"&gt;{{member.Name}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;button (click)="runR()"&gt;Run&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div id="results"&gt;
      &lt;div *ngFor="let mem of members" class="member-card-{{mem.Id}}"&gt;
          &lt;div class="card-container"&gt;
               &lt;div *ngFor="let case of mem.Cases" class="case-card" id="{{case.Id}}"&gt;{{case.Number}}
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was trying to use only <code>ngFor</code> but now I get</p>
  
  <pre><code>Cannot set property 'cases' of undefined
  </code></pre>