Browser keep crashing with @cloudinary/ng when try use it inside loop in Angular about frontend-frameworks HOT 6 OPEN

Hi there,

Thank you for your input.
We will review this issue on our side.

Regards,
Wissam

from frontend-frameworks.

Hi @BechkoB,
I've forked our sample repo and set the angular core and Cloudinary Angular SDK to the latest version without any issues:
codesandbox.

Here are my dependencies:

 "dependencies": {
    "@angular/animations": "17.0.4",
    "@angular/common": "17.0.4",
    "@angular/compiler": "17.0.4",
    "@angular/core": "17.0.4",
    "@angular/forms": "17.0.4",
    "@angular/platform-browser": "17.0.4",
    "@angular/platform-browser-dynamic": "17.0.4",
    "@angular/router": "17.0.4",
    "@cloudinary/ng": "^2.0.0",
    "@cloudinary/url-gen": "^1.13.0",

In addition, version 16 and up should be supported: https://github.com/cloudinary/frontend-frameworks/tree/master/packages/angular#version-support

If you're still having an issue, can you please set a code sandbox and share the link with us?

from frontend-frameworks.

Hi @atdcloud here is the sandbox which crashes too:
https://codesandbox.io/p/devbox/bold-goldstine-qz3rsr?file=%2Fsrc%2Fapp%2Fapp.component.html%3A19%2C62

it works when you use the tag like that : <advanced-image [cldImg]="img"> , but when try to get the image through a method it crashes because sends a hundreds of requests to cloudinary

from frontend-frameworks.

Hi @BechkoB, the advanced-image component does not support a function in cldImg. Please check this out as a reference:

from frontend-frameworks.

Hello, @jroco-cloudinary Thanks, so what could be the best solution to use it inside *ngFor , for example I have an array of categories and icons for them, where I need the icons from cloudinary ?
<mat-list>
<mat-list-item *ngFor="let category of categories$ | async">
<a>
<advanced-image [cldImg]="category.icon.publicId"></advanced-image>
<span class="flex-1 category-title">{{ category.title }}</span>
</a>
</mat-list-item>
</mat-list>

from frontend-frameworks.

Hi @BechkoB,

I modified your code and added elements that loop through an object. Please see here: https://2l2gln-4200.csb.app/

Basically, I declared an array of CloudinaryImage in the app.component.ts.

imgList: Array<{ myImage: CloudinaryImage }> = [];
  constructor() {}

Then loop through it in the app.component.html.

<table>
  <thead>
      <th>My Images</th>
  </thead>
  <tbody>
      <tr *ngFor="let category of imgList">
        <advanced-image  [cldImg]="category.myImage"></advanced-image>
      </tr>
  </tbody>
</table>

Please let me know if this works for you.

from frontend-frameworks.