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

I fixed it this way:

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