prevent running function on backtick angular

Question

i have this syntax on angular(typescript), my problem is when this code runs, its automatically runs clickShowAttachments function, instead i am need to run function when this button clicks...

${data.attachments ? `<button (click)="${this.clickShowAttachments(data.attachments)}">show attachments</button>` : ''}

and when it compiles, if i inspect page i see that: (click)="undefined" ( https://i.stack.imgur.com/6kEin.png )

i tried replace double quote with single quote but nothing happens..

Answer 1

You are getting undefined because this.clickShowAttachments(data.attachments) returns undefined.

have you tried using

${data.attachments ? `<button (click)="this.clickShowAttachments(data.attachments)">show attachments</button>` : ''}

You can do this in angular2+

<button *ngIf="data?.attachments" (click)="this.clickShowAttachments(data.attachments)">show attachments</button>

Answer 2

guys i fixed it that way

const a = `<button id="btn1">btn text</button>`;
document.getElementById("btn1").addEventListener('click', ()=> this.clickShowAttachments(data.attachments));