How to use ImageKit with Angular applications

ImageKit.io lets you fetch images from your storage after applying real-time transformations. You specify the transformations to be applied through URL parameters in the image URL. Generating the image URL programmatically in front-end application can be a non-trivial task. In addition to this, uploading a file to your ImageKit.io media library straight from the client-side requires certain authentication-related operations to be performed.

ImageKit client-end SDKs serve the purpose of simplifying these processes by exposing pre-written, framework-specific code modules for these operations.

ImageKit.io provides SDKs for all major front-end frameworks, including Angular, React, and Vue.js. This article will look at how you can set up a simple Angular application and integrate the ImageKit.io SDK into it to expose ImageKit functionality to your users.

Prerequisites:

Basic web development knowledge
ImageKit Account (Create one)
Angular (Install the Angular CLI)

Note: If you want to explore how the ImageKit SDK is utilized by an Angular app, there are pre-built sample Angular apps for every version (v4-v9). Refer to the docs for this.

Step 1: Create a New Angular Application

Navigate to your preferred directory and run:

ng new sample-imagekit-app

Step 2: Install the ImageKit Angular SDK package from npm

Inside the sample-imagekit-app directory, run

npm install imagekitio-angular

This will download the Angular SDK package from the npm registry, and add it to the dependencies list of your Angular app (unless you're using npm <5.0.0)

Step 3: Get your ImageKit Public Key
In your ImageKit account dashboard, go to API Keys section from the navigation bar. Note down your public API key.

Step 4: Initial Configuration of the ImageKit SDK in your App
You will need to import the imagekitio-angular module in your application. Go to the src/app/app.module.ts and configure it like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ImagekitioAngularModule } from 'imagekitio-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImagekitioAngularModule.forRoot({
      publicKey: environment.publicKey,
      urlEndpoint: environment.urlEndpoint,
      authenticationEndpoint: environment.authenticationEndpoint
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

publicKey and urlEndpoint are mandatory parameters for SDK initialization.

authenticationEndpoint is essential if you want to use the SDK for client-side uploads. publicKey should be your ImageKit account's public key, which we discovered in step 3. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields i.e. signature, token and expire. You must implement this API endpoint in your backend using ImageKit.io server-side SDKs. Learn more about this process.

NOTE: Never publish your private key on your front-end / client-side apps. The Private API key should be kept confidential and only stored on your backend servers.

Once you've configured these and the backend API to generate a signature for uploads, you can start using the SDK to fetch transformed images from or upload new images to your ImageKit account.

The ImageKit Angular SDK

The library includes 2 components:

ik-image
ik-upload

ik-image

The ik-image tag allows you to fetch an image with applied transformations from your ImageKit storage. You can specify the source of the image with either the path option, or the src option.
transformation option is optional, and specifies what transformations are to be applied to the image. It is an array of objects, where the transformations are applied in sequential order based on the order of the transformation objects in the array. Transformation object at array index 0 is applied first, 1 second, and so on...

path should be the directory-based location of the image in your storage (the part of the URL that comes after urlEndpoint). Thus, the complete URL of the image is urlEndpoint + path. Example:

<ik-image path="/default-directory/default-image.jpg" transformation={[{
  "height": "300",
  "width": "400"
}]}></ik-image>

src on the other end, is the complete URL of the image to be fetched. Example:

<ik-image 
    src="<full_image_url_from_db>" 
    transformation={[{
    "height": "300",
    "width": "400"
  }]}
  ></ik-image>

Applying Transforms

const transformations = [{
  width: 90,
  height: 180
}]

<ik-image style="" src="<full_image_url_from_db>" transformations = {transformations}></ik-image>

The above image will apply transformation of width = 90 and height = 180 on the image. Since some transformations are destructive you might want to control the order in which the transforms are applied.
This SDK supports aliases for most transformations supported by ImageKit to improve readability. These aliases can be found here. If you cannot find an alias for the transformation you want, you can use the original name for that transformation as specified in the ImageKit docs.

Low Quality Image Placeholders (LQIP) for image
The SDK supports LQIP for your images, if you set lqip to true in the image component. LQIP allows you to temporarily load a lower quality image on the webpage, until the original image is loaded in the background. This greatly improves the visual appeal of the page when it's loading.

<ik-image style="" src="<full_image_url_from_db>" lqip={{active:true, quality: 20}}></ik-image>

The value of active can be either true or false, depending on whether you want this functionality or not. quality specifies the quality of the placeholder image. It can be any numeric value. A low number means lower quality (small file size), while a higher number means higher quality.

ik-upload

The SDK provides a simple Component to upload files to the ImageKit Media Library. It has an attribute called fileName, which is used by SDK for fileName parameter required to upload. The file parameter is provided as an input from the user.

Besides this, make sure that you have set up the signature generation API endpoint in your back-end. This endpoint should be assigned to the authenticationEndpoint option during SDK initialization.

Example:

// Simple upload
<ik-upload fileName="my-upload" /></ik-upload>

// Using callbacks and other parameters of upload API
<ik-upload fileName="test_new" [useUniqueFileName]="false" [isPrivateFile]="true"
    (onSuccess)="handleUploadSuccess($event)" (onError)="handleUploadError($event)"></ik-upload>

ik-upload component accepts all the parameters supported by the ImageKit Upload API as attributes e.g. tags, useUniqueFileName, folder, isPrivateFile, customCoordinates etc.

Let us know if you have any questions or create an issue on the Github repo.