title: Adding event listener to dynamic element in Angular 4?
body: <p>I have some description text from an API that I am inserting as HTML into the DOM.</p>
  
  <pre><code>&lt;div class="activity-description" [innerHTML]="description"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The description is set within ngOninit();</p>
  
  <pre><code>if (this.eventDetail.description.length &gt; 255) {
     this.description = this.eventDetail.description.substring(0, 255) + '&lt;span class="more-description"&gt; ...Learn More&lt;/span&gt;';
  }
  </code></pre>
  
  <p>I am trying to add an event listener to the "more-description" class within the ngAfterViewInit()</p>
  
  <pre><code>var el = this.elementRef.nativeElement.querySelector('.more-description');
      if (el)
          el.addEventListener('click', this.displayFullDescription());
  </code></pre>
  
  <p>The element is null and does not allow the event listener to be attached. How do I add this event listener to html elements that are dynamically added? </p>