Свяжите даже динамически добавляемый HTML в ионном 3

Question

I am developing an app with the help of ionic 3 
in the application i am generating dynamic html from .ts file and appending in HTML  . Now i want to bind and click event to html 

After user done an click event i want to refresh the content present in the dynamically generated html
please help to solve this 


    enter code here
my .ts file
with the below code i am generating html and appending to html
 outputHtml = '<div id="rpl_crt"><div class="sys_ot"><h6 class="itm_nme">My Cart</h6>';
      var innerHTML = '';
      let amount = 0;
      let savings = 0;
      for (let dt in data) {
        amount += data[cart].vv.value;
        savings += data[cart].aa.value;
        innerHTML += '<div class="cartlist">'
        innerHTML += '<div class="row ">'
        innerHTML +=  '<div col-3 class="itemimg">'
        let img_url=data[cart].product.images ? ConfigurationPage.commonURL+data[dt].aa.images[1].url:'assets/img/place_holder.png'
        innerHTML +=    '<img src="'+img_url+'" >'
        innerHTML +=  '</div>'
        innerHTML +=  '<div col-9>'
        innerHTML +=    '<h6>' + data[dt].aa.name + '</h6>'
        innerHTML +=    '</div>'
        innerHTML +=  '</div>'
        innerHTML +='<div class="btn_qnty row">'
        innerHTML +=  '<div col-5>'
        innerHTML +=  '<div class="row">'
        innerHTML +=    '<div col-3 click="abc(dt)"><span class="circle">-</span></div>'
        innerHTML +=    '<div text-center col-6 >'+data[dt].q+'</div>'
        innerHTML +=    '<div col-3 (click)="xyz(dt)"><span class="circle " >+</span></div>'///I want an click event here to do some action 
       // 
        innerHTML +=  '</div>'
        innerHTML +=  '</div>'
        innerHTML +=  '<div col-7>'
        innerHTML +=    '<div class="prd_dtl">'
        innerHTML +=      '<div class="proctprice">'
        if (data[dt].ss.value != 0) {
          innerHTML += '<span class="orgin_prc">' + this.currency.transform((parseFloat(data[dt].tp.value) + parseFloat(data[dt].ss.value)), 'INR') + '</span>'
        }

        innerHTML += '<span class="dsc_prc">' + this.currency.transform(data[dt].tp.value, 'INR') + '</span>'
        innerHTML +=    '</div>'
        if (data[cart].savings.value != 0) {
          innerHTML += '<p class="save_prc">' + this.currency.transform(data[dt].ss.value, 'INR') + '</p>'
        }
        innerHTML +=    '</div>'
        innerHTML +=  '</div>'
        // innerHTML += '<div class="quantity">' + data[dt].qt+ '</div>'
        innerHTML += '</div>'
        innerHTML += '</div>'
        let abc={
          code:data[dt].aa.code,
          data:data[dt]
        }
        clickEventMethod.push(abc);
      }
      this.totalAmount = amount;
      this.totalSaving = savings;
      // outputHtml += '</ion-list>';
      let footerHtml = '<div class="row cartfooter">'
      footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalAmount, 'INR') + '</div>'
      footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalSaving, 'INR') + '</div>'
      footerHtml += '<div col-4><p>Say <strong>Checkout</strong> to checkout all items</p></div>'
      console.log(clickEventMethod,'clickEventMethod')
      outputHtml += innerHTML + footerHtml + '</div></div>';
     
        this.appenData.nativeElement.insertAdjacentHTML('beforeend', outputHtml);//Appending the data at the end of the ion-content      // break;     
       
HTML
<ion-header [ngClass]="!isFromHome ? 'leftPaddingCssTitle':'cssTitle'">

  <ion-navbar color="danger">
    <ion-title>{{headerName}}</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
    <div class="hint">
        <p>To go back , say <b>Go Back</b></p>
       <p>To Go cart , Say <b>Open Cart </b> or <b>Go to Cart</b></p>
          
       </div>
  <div class="main" #appenData id="main">

  </div>
<ion-content>