Added onChange event and updated test & readme

Author: Manu Chaudhary

README.md

@@ -170,6 +170,7 @@ The SDK supports automatic support for LQIP for your images, if you set lqip to
 ##### How does the lqip work?
 The component tries to keep the it simple, it loads a lower quality image using the quality parameter to load a lower quality image, which is then replaced with the actual quality image later.
 
+## File Upload
 #### ik-upload
 The SDK provides a simple Component to upload files to the ImageKit Media Library. It accepts `fileName` parameter as a prop. The file parameter is provided as an input from the user. 
 
@@ -184,4 +185,4 @@ Sample Usage
   <ik-upload fileName="my-upload" /></ik-upload>
 ```
 
-`ik-upload` component accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#request-structure-multipart-form-data) as props e.g. `tags`, `useUniqueFileName`, `folder` etc.
+`ik-upload` component accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#request-structure-multipart-form-data) as props e.g. `tags`, `useUniqueFileName`, `folder`, `isPrivateFile`, `customCoordinates` etc.

samples/imagekitio-angular4-sample/src/app/app.component.html

@@ -1,10 +1,10 @@
 <div className="App">
   <h1>Hi! This is an ImageKit Angular SDK Demo!</h1>
   <p>Let's add an Image</p>
-  <ik-image src="https://ik.imagekit.io/18ykd9wzp/default-image.jpg" alt="This is an alt">
+  <ik-image src="https://ik.imagekit.io/demo/default-image.jpg" alt="This is an alt">
   </ik-image>
   <p>Let's transform this once</p>
-  <ik-image src="https://ik.imagekit.io/18ykd9wzp/default-image.jpg" [transformation]="transformationOne"></ik-image>
+  <ik-image src="https://ik.imagekit.io/demo/default-image.jpg" [transformation]="transformationOne"></ik-image>
   <p>Let's transform this more than once</p>
   <ik-image path="{{path}}" [transformation]="transformationTwo"></ik-image>
   <p>LQIP</p>

sdk/lib/src/imagekitio-angular/ik-image/ik-image.component.ts

@@ -1,11 +1,11 @@
-import { Component, AfterViewInit, OnInit, ElementRef, Input } from '@angular/core';
+import { Component, AfterViewInit, OnInit, ElementRef, Input, OnChanges } from '@angular/core';
 import { ImagekitService } from '../imagekit.service';
 
 @Component({
   selector: 'ik-image',
   template: `<img src={{src}}>`,
 })
-export class IkImageComponent implements AfterViewInit, OnInit {
+export class IkImageComponent implements AfterViewInit, OnInit, OnChanges {
   @Input('src') src:string;
   @Input('path') path:string;
   @Input('urlEndpoint') urlEndpoint:string;
@@ -25,6 +25,10 @@ export class IkImageComponent implements AfterViewInit, OnInit {
     this.setUrl(this.src, this.path, this.transformation, this.lqip, this.urlEndpoint, this.transformationPosition, this.queryParameters);
   }
 
+  ngOnChanges(): void {
+    this.ngOnInit();
+  }
+
   ngAfterViewInit() {
     const that = this;
     this.loadImage(this.lqip && this.lqip.active ? this.lqipUrl : this.url);

sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-angular",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

sdk/src/sdk-tests/ik-image.component.spec.ts

@@ -23,7 +23,7 @@ describe("IkImageComponent", () => {
     expect(component.url).toBe(`https://example.com/def?ik-sdk-version=${version}`);
   });
 
-  it("Presence and absence of trailing slash in should not result in double slash (//) in the returned url", () => {
+  it("Presence and absence of trailing slash in urlEndpoint should not result in double slash (//) in the returned url", () => {
     let comp: IkImageComponent;
     let iKService: ImagekitService;
     iKService = new ImagekitService({
@@ -49,7 +49,7 @@ describe("IkImageComponent", () => {
     );
   });
 
-  it("Presence and absence of leading slash in parameter should not result in double slash (//) in the returned url", () => {
+  it("Presence and absence of leading slash in path parameter should not result in double slash (//) in the returned url", () => {
     let comp: IkImageComponent;
     let iKService: ImagekitService;
     iKService = new ImagekitService({
@@ -114,8 +114,8 @@ describe("IkImageComponent", () => {
   });
 
   it("setUrl should create correct URL when src is provided", () => {
-    component.setUrl("abc");
-    expect(component.url).toContain(`/abc?ik-sdk-version=${version}`);
+    component.setUrl("https://test-absolute-path.com/image.jpg");
+    expect(component.url).toContain(`https://test-absolute-path.com/image.jpg?ik-sdk-version=${version}`);
   });
 
   it("setUrl should create correct URL when path is provided", () => {