Continuous Updates to innerHtml in Angular2

Question

Continuous Updates to innerHtml in Angular2

While working on a project, I encountered an issue that seems to be more about style than anything else. The endpoint I am calling is returning an SVG image instead of the expected jpeg or png format, and I need to display it on the page. To address this, I created a service that fetches the SVG and called this service from a method in the component named getImage(id).

In the HTML file, I have implemented the following code snippet:

<div [innerHtml]="getImage(id)></div>

One concern that has arisen is the inability to inspect the SVG in Chrome due to constant updates. I am unsure if this poses a problem and, if so, how to resolve it. It appears that the update method is being repeatedly called without any visible changes on the page triggering the change detection process.

angular typescript innerhtml

Answer 1

Answer №1

Here is an example showcasing my comment:

import { ..., OnChanges, ... } from '@angular/core'

@Component({ ... })
export class ...Component implements OnChanges {
   private picture: string;

   constructor(...) { ... }

   public ngOnChanges(): void {
      this.getPicture(1); //Retrieve id from a source
   }

   private getPicture(id): void {
      ...
      this.picture = ...;
   }
}

HTML

<div [innerHtml]="picture"></div>

Answer 2

Here is an example showcasing my comment:

import { ..., OnChanges, ... } from '@angular/core'

@Component({ ... })
export class ...Component implements OnChanges {
   private picture: string;

   constructor(...) { ... }

   public ngOnChanges(): void {
      this.getPicture(1); //Retrieve id from a source
   }

   private getPicture(id): void {
      ...
      this.picture = ...;
   }
}

HTML

<div [innerHtml]="picture"></div>

Continuous Updates to innerHtml in Angular2

Answer №1

Similar questions

Experimenting with Typescript, conducting API call tests within Redux actions, mimicking classes with Enzyme, and using Jest

Angular Image/Video Preview: Enhance Your Visual Content Display

The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Deduce the property type by the existence of the value

What is the best way to retrieve data (using GET) following React state changes?

Unusual Behavior of Observable.concat() in Angular 4 with RxJS 5

Unlock the canGoBack feature in your Ionic 5 app with these simple steps!

What is the most effective method of testing with jest to verify that a TypeScript Enum list contains all the expected string values?

Unlocking the Power of Passing Props to {children} in React Components

Leveraging external modules within Angular 2 to enhance component functionality

Loading data into the Nuxt store upon application launch

The 'export '__platform_browser_private__' could not be located within the '@angular/platform-browser' module

What is the proper way to conduct unit testing on a function that is invoked in a service's constructor

Restarting an Angular app is necessary once its HTML has been updated

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

"Exploiting the Power of Nullish Coalescing in Functional

Enhancing SQLite syntax in Ionic 2: A fresh approach!

I am continuously receiving the message "Alert: It is important for every child in a list to possess a distinct "key" prop." while working with the <option> list

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

There is no such property as formData.delete()