Bind an even to dynamically appended html in ionic 3 - html

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>