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: https://github.com/cloudinary/frontend-frameworks/blob/4ba4d98f6fb7e587c147ccff3db35ecf3153c1b6/packages/angular/projects/cloudinary-library/src/lib/cloudinary-image.component.ts#L60

[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"> <advanced-image [cldImg]="category.icon.publicId"> {{ category.title }} `

[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.