cloudinary
diff --git a/‎projects/angular-cld/src/lib/cloudinary-image.component.spec.ts
Copy file name to clipboardExpand all lines: projects/angular-cld/src/lib/cloudinary-image.component.spec.ts
+33Lines changed: 33 additions & 0 deletions b/‎projects/angular-cld/src/lib/cloudinary-image.component.spec.ts
Copy file name to clipboardExpand all lines: projects/angular-cld/src/lib/cloudinary-image.component.spec.ts
+33Lines changed: 33 additions & 0 deletions
diff --git a/‎projects/angular-cld/src/lib/cloudinary.service.ts
Copy file name to clipboardExpand all lines: projects/angular-cld/src/lib/cloudinary.service.ts
+10-2Lines changed: 10 additions & 2 deletions b/‎projects/angular-cld/src/lib/cloudinary.service.ts
Copy file name to clipboardExpand all lines: projects/angular-cld/src/lib/cloudinary.service.ts
+10-2Lines changed: 10 additions & 2 deletions
@@ -308,6 +308,39 @@ describe('CloudinaryImage', () => {
     });
   });
 
+  describe('should support user variables', () => {
+    @Component({
+      template:
+        `
+        <cl-image public-id="sample">
+          <cl-transformation variables="[['$imgWidth','150']]"></cl-transformation>
+          <cl-transformation width="$imgWidth" crop="crop" ></cl-transformation>
+        </cl-image>
+      `
+    })
+    class TestComponent { }
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement;  // the elements w/ the directive
+
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent],
+        providers: [{ provide: Cloudinary, useValue: localCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+
+      // Our element under test, which is attached to CloudinaryImage
+      des = fixture.debugElement.query(By.directive(CloudinaryImage));
+    });
+
+    it('creates an img element with user variables', () => {
+      const img = des.children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular2_sdk@@/image/upload/$imgWidth_150/c_crop,w_$imgWidth/sample');
+    });
+  });
+
   describe('Sample code presented in README', () => {
     @Component({
       template:
 
@@ -15,6 +15,10 @@ const isJsonLikeString = function (str: any): boolean {
   return str && typeof str === 'string' && (str.trim().match(/^{[\s\S]*?}$/) !== null);
 };
 
+const isArrayLikeString = function (str: any): boolean {
+  return str && typeof str === 'string' && (str.trim().match(/^\[[\s\S]*?]$/) !== null);
+};
+
 const isNamedNodeMap = function (obj: any): boolean {
   return obj && (obj.constructor.name === 'NamedNodeMap' || obj instanceof NamedNodeMap);
 };
@@ -31,9 +35,13 @@ const namedNodeMapToObject = function (source: NamedNodeMap): any {
 
 const transformKeyNames = function (obj: any): any {
   let _obj = obj;
-  if (isJsonLikeString(obj)) {
+  if (isJsonLikeString(obj) || isArrayLikeString(obj)) {
     // Given attribute value is in the form of a JSON object -
-    // Transforms the string into an object, as the Javascript API expects
+    // Transforms the string into an object or array, as the Javascript API expects
+
+    if (isArrayLikeString(obj)) {
+      obj = obj.replace(/'/g, '"');
+    }
     _obj = JSON.parse(obj);
   } else if (isNamedNodeMap(obj)) {
     _obj = namedNodeMapToObject(obj);