title: Angular 8 - Dynamically added button.Click event not working
body: <p>I am trying to add product images on clicking the add button in screen and to remove using delete button. These should be loaded dynamically when user clicks add or delete button. But when I dynamically inject html and bind click event it's not working. On clicking it, function is not calling. I have simplified 
  the code below.
  HTML file:</p>
  
  <pre><code>&lt;div class="product_images"&gt;
            &lt;div class="imageHeading"&gt;
                          &lt;p&gt;
                              Images
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="kt-form__group"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-2 imageLabel"&gt;Main Image&lt;/div&gt;
                              &lt;div class="col-lg-3 imageLabel"&gt;Choose Image&lt;/div&gt;
                              &lt;div class="col-lg-2 imageLabel"&gt;Image&lt;/div&gt;
                              &lt;div class="col-lg-2 imageLabel"&gt;Actions&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="imagesContainer" [innerHtml]="containerToAdd | sanitizeHtml"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Ts file </p>
  
  <pre><code>// Angular
  import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  // Material
  import { SelectionModel } from '@angular/cdk/collections';
  import { MatPaginator, MatSort, MatSnackBar, MatDialog, MatRadioButton } from '@angular/material';
  import { ProductManagementService } from '../../../../../core/e-commerce/_services/product-management.service';
  import { ToastrService } from 'ngx-toastr';
  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'kt-product-edit',
    templateUrl: './product-edit.component.html',
    styleUrls: ['./product-edit.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class ProductEditComponent implements OnInit {
  
  previewUrl : any = "/assets/media/images/noimage.jpg";
  containerToAdd : string = "";
  
  constructor(
      private products: ProductManagementService,
      private router: Router,
      private route: ActivatedRoute,
      private toastr: ToastrService,
      private cdr: ChangeDetectorRef,
      private FB: FormBuilder,
      ) {
  
      }
   ngOnInit() {
      this.addImage();
  }
  addImage(){
       this.containerToAdd = `
        "&lt;div class="kt-form__group image-container container-1"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-lg-2"&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
                &lt;div class="col-lg-3"&gt;&lt;input type="file" accept="image/*" (change)="imagePreview($event)" /&gt;&lt;/div&gt;
                &lt;div class="col-lg-2"&gt;&lt;img [src]="previewUrl" class="prod_image" /&gt;&lt;/div&gt;
                &lt;div class="col-lg-2"&gt;
                    &lt;span class="deleteElement" (click)="deleteImage()"&gt;
                      Del
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;"`;
    }
    deleteImage() {
      console.log("deleteImage");
    }
  }
  </code></pre>
  
  <p>When I click that span with that click event, deleteImage() function is not calling. </p>