Angular innerhtml element failed in capturing click event-CodePudding

        <div style="text-align: left;margin-left: 10px;flex-grow: 1;">
            <div [innerHtml]="secureHtml(control.data.text)" *ngIf="mode!=Mode.MODE_EDITABLE" (click)="handleClick()"></div>
            <app-inline-ckeditor [(text)]="control.data.text" [mode]="mode" *ngIf="control&&mode==Mode.MODE_EDITABLE"></app-inline-ckeditor>
        </div>

click on the div with innerHtml doesn't trigger click event

CodePudding user response：

change your code to this, you are missing brackets replace handleClick with handleClick()

<div [innerHtml]="html" (click)="handleClick()">

CodePudding user response：

I create a new component containing the "to click" element, it works, then add code piece by piece. Finally, the code of two components is the same except component name is different. However, new component works, but old component doesn't work. don't know why, all codes are same, except component name is different.

CodePudding user response：

I finally found how to fix the issue: 1、<div [innerHtml]="safeHtml" (click)="handleClick()"> renders correctly, and responds to click. 2、<div [innerHtml]="generateSafeHtml()" (click)="handleClick()"> renders correctly, but doesn't respond to click.