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

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>