Binding Variable Value with String Interpolation Error with Angular 4, Ionic and Cloudinary

Question

I am using ionic 3, angular 4, Cloudinary to build an image editing application. I am trying to display an image and apply an overlay transformation, however when trying to bind a variable value to the overlays public_ID I get an error: "Can't bind to 'overlay' since it isn't a known property of 'cl-transformation'." To isolate the issue I assigned the variable a fixed value of a correct public ID, yet it still does not work. Please take a look at the code below which shows a working example and the non working example.

//Works perfectly fine

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="testOverlay" height= "400">
  </cl-transformation>
</cl-image>

export class ImagesPage {

overlayID: string = "testOverlay";

//Throws error

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="{{overlayID}}" height= "400">
  </cl-transformation>
</cl-image>

Did you try this style of syntax: [overlay]="overlayID"

DeborahK
– DeborahK

2017-11-22 22:59:48 +00:00
Commented Nov 22, 2017 at 22:59 — DeborahK
– DeborahK, Commented Nov 22, 2017 at 22:59
Yea did try that one, but still get the same error.

Tom H
– Tom H

2017-11-22 23:03:42 +00:00
Commented Nov 22, 2017 at 23:03 — Tom H
– Tom H, Commented Nov 22, 2017 at 23:03

Fateh Mohamed · Accepted Answer · 2019-07-02 09:07:35Z

1

you can use attribute value :

[attr.overlay]="overlayID"

edited Jul 2, 2019 at 9:07

answered Nov 22, 2017 at 23:26

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom H Over a year ago

You sir, are a lifesaver. Thank you

Fateh Mohamed Over a year ago

you're welcome, you can check it as correct if it helped

sebaferreras Over a year ago

[attr.overlay]="overlayID"would be the proper way to do it, since string interpolation is not recommended for attribute binding :)

Collectives™ on Stack Overflow

Binding Variable Value with String Interpolation Error with Angular 4, Ionic and Cloudinary

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related