Removing click functionality in Angular 2 when utilizing [innerHTML]

Question

Removing click functionality in Angular 2 when utilizing [innerHTML]

Currently, I need to include HTML in my TypeScript file using the [innerHTML] tag within the template.

I am attempting to add a click function within the HTML:

status = "<img src='assets/hello.png' (click)='hello()' />";

However, the click function is removed and a warning message appears in the console:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

I have seen suggestions about using "DomSanitizer" but haven't come across an example that addresses my specific issue.

angular typescript

Answer 1

Answer №1

When utilizing [innerHTML], Angular will remove all specific Angular elements.

If functionality like this is needed, you have the option to dynamically create components as described in Equivalent of $compile in Angular 2
Alternatively, you can utilize imperative code to attach an event handler like so:

constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef) {}

someMethod() {
  this.status = "<img src='assets/hello.png' (click)='hello()' />";
  this.cdRef.detectChanges();
  this.elRef.nativeElement.querySelector('img').addEventListener('click', this.hello.bind(this);
}

Answer 2

When utilizing [innerHTML], Angular will remove all specific Angular elements.

If functionality like this is needed, you have the option to dynamically create components as described in Equivalent of $compile in Angular 2
Alternatively, you can utilize imperative code to attach an event handler like so:

constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef) {}

someMethod() {
  this.status = "<img src='assets/hello.png' (click)='hello()' />";
  this.cdRef.detectChanges();
  this.elRef.nativeElement.querySelector('img').addEventListener('click', this.hello.bind(this);
}

Removing click functionality in Angular 2 when utilizing [innerHTML]

Answer №1

Similar questions

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

Harnessing the power of external Javascript functions within an Angular 2 template

Compiled TypeScript files are missing require statements for imported components

Angular only allows click events to trigger during a push

Showing the Enum name rather than the value in an Angular HTML template for a bound Typescript Interface

Ways to confirm if the indexed sort is an extension of a string

Exploring the Functionality of Backend Objects in Frontend TypeScript within the MEAN Stack Environment

Error encountered in app.module.ts file of Angular 2 application

What steps are involved in building a modal pop-up in Angular without using any pre-existing libraries

Exploring Angular 2: Diving into Validators, ReactiveForms, FormBuilder, and tailored classes

Retrieving the value from the series object and showing it in the tooltip of a high chart with the help of Angular 4

The method TranslateModule.forRoot does not require a specific type argument and produces a ModuleWithProviders type

The child component is receiving null input data from the Angular async pipe, despite the fact that the data is not null in the

Combining results from multiple subscriptions in RxJS leads to a TypeScript compiler error

Can someone guide me on incorporating static methods into a Mongoose model using TypeScript for Mongoose version 5.11?

Tips for incorporating Angular-specific code into Monaco Editor

How can I show the localStorage value in an HTML5 template using Angular2?

Issue regarding angularjs type definitions

How can I combine my two ngIf conditions into an ngIf else statement?

I am encountering an issue with Wedriver.IO where screenshots of executions on a Remote Selenium Grid Hub are not being included in my Allure Reports