Browser keep crashing with @cloudinary/ng when try use it inside loop in Angular

[BechkoB]

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/ng

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ x] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

In my Angular App I get an Array with image details from Database with publicId field for example: images = [ { publicId : "something", cratedAt: "...", updatedAt: ".."}, etc.. ] .
And in my component I'm trying to loop over them and get the images from Cloudinary:
<advanced-image [cldImg]="getImg(image.publicId)">

The method looks like that:
getImg(publicId: string): CloudinaryImage {
console.log(publicId, 'publicId') const cld = new Cloudinary({
cloud: {
cloudName: environment.cloudinary.cloud_name,
},
})
return cld.image(publicId)
}

when I start the app, my browser crashes all the time. How can I fix this ? It was working before with angular 14 and the depreciated package @cloudinary/angular-5.x . I updated the project to Angular 16.

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x ] All

Versions and Libraries (fill in the version numbers)

@cloudinary/ng: "^2.0.0",
Node - v18.17.0
NPM - 9.4.0

[wissam-khalili]

Hi there,

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

Regards,
Wissam

[atdcloud]

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?

[BechkoB]

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

[jroco-cloudinary]

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

frontend-frameworks/packages/angular/projects/cloudinary-library/src/lib/cloudinary-image.component.ts

Line 60 in 4ba4d98

selector: 'advanced-image',

[BechkoB]

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>

[jroco-cloudinary]

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.