CODEWITHSUNDEEP
htmlangular
user3873278
user3873278

Reputation:

Angular detects change for dom-to-image and renders it infinite times

I hope I have the right idea in the title, but I am not sure. My application uses Angular 4 and can't be updated at this point in time.

I have a component which renders child-components using *ngFor.

Each child-component is supposed to create a wallpaper for itself. For this purpose I use dom-to-image, or to be precise dom-to-image-more.

An html-element is created through user-input and then set as a repeating wallpaper.

This works fine for a specific amount of elements, but not if I render them dynamically using *ngFor.

Please note that the code below is very static and is supposed to become more flexible once I solved this issue (image and color are supposed to be set by the user).

Parent:

        <div
          class="advertise-advertise"
          *ngFor="let advertisement of getAdvertisements()"
        >
          <advertisement
            [advertisement]="advertisement"
            (reportAdvertisement)="reportAdvertise($event)"
            (contactAdvertiser)="contactAdvertise($event)"
          >
          </advertisement>
        </div>

Child:

<div
  class="advertise-advertise-item"
  [ngStyle]="{'background-image': 'url(' + backgroundImage + ')'}"
  [ngClass]="hover ? 'hover' : ''">
  <div style="overflow: hidden;">
    <div #wallpaper class="wallpaper" style="width: 64px; height: 64px; background-color: green; opacity: 0.3; text-align: center; line-height: 64px;">
      <img height="32px" width="32px" src="/assets/images/flask-solid.png"  alt=""/>
    </div>
  </div>
  ...
</div>

Child-component:

ngOnInit(): void {

const parent = this;
domtoimage.toPng(this.wallpaper.nativeElement)
  .then(function (dataUrl) {
    parent.advertisement.backgroundImage = dataUrl;
    parent.renderer.setStyle(parent.wallpaper.nativeElement, 'display', 'none');
  })
  .catch(function (error) {
    console.error('Could not render background image', error);
  });
}

My application runs into an infinite loop rendering the image over and over again and thus making the application being stuck in loading.

I am very sure that I am missing a crucial pattern here, but I am seeminly unable to find a solution myself.

Thanks in advance!

Upvotes: 0

Views: 941

Answers (1)

A. Roussos
A. Roussos

Reputation: 258

Remove the function in ngFor and replace it with a property

Upvotes: 1

Related Questions