Angular ImageKit SDK

Real-time image & video resizing, automatic optimization, responsive images, and file uploading in Angular using ImageKit.io.

The Angular ImageKit SDK is a wrapper built on top of the ImageKit JavaScript SDK. It seamlessly integrates ImageKit's URL generation, image and video optimization, responsive image handling, and file upload capabilities into Angular applications.

The SDK is lightweight and has first-class TypeScript support. It works with Angular 14+ (standalone components and directives). You can view the source code on Github.

Installation and Setup

Install the Angular SDK via npm or yarn:

npm install @imagekit/angular
# or
yarn add @imagekit/angular

The SDK supports both server-side rendering (SSR) and client-side rendering (CSR), so it can be added to any Angular project.

This Angular SDK exports IKImageDirective and IKVideoDirective directives. These directives can be applied to native <img> and <video> elements to add ImageKit's optimization and transformation capabilities. They automatically handle URL generation, lazy loading, responsive images, and transformations while preserving all native HTML attributes.

Modern Angular (14+) - Standalone Directives

For Angular 14 and above, you can import standalone directives directly:

import { Component } from '@angular/core';
import { IKImageDirective, provideImageKit } from '@imagekit/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [IKImageDirective],
  template: `
    <img
      ikSrc="/profile.png"
      [width]="500"
      [height]="500"
      alt="Picture of the author"
    />
  `
})
export class AppComponent {}

Configure the SDK globally using provideImageKit() in your application config:

import { ApplicationConfig } from '@angular/core';
import { provideImageKit } from '@imagekit/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideImageKit({
      urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
    })
  ]
};

Besides IKImageDirective and IKVideoDirective, the SDK also provides utility functions and error classes that can be used independently of the components.

Utility functions

• buildSrc – Generates URLs for images and videos based on your URL endpoint and transformation parameters.
• buildTransformationString – Converts array of transformation objects into a URL query string.
• upload – Facilitates file uploads to ImageKit with built-in support for common error handling, progress tracking, and abort functionality.
• getResponsiveImageAttributes – Generates responsive image attributes that can be used on raw HTML image elements. This SDK however handles this automatically for you when using the IKImageDirective component with [responsive]="true".

Refer to linked documentation for detailed usage of these utility functions.

Error classes for upload error handling

• ImageKitInvalidRequestError - For invalid requests.
• ImageKitAbortError - For aborted uploads.
• ImageKitUploadNetworkError - For network errors during upload.
• ImageKitServerError - For server-side errors.

Image Directive

The IKImageDirective is applied to native HTML <img> elements using the ikSrc attribute. It enhances the image element with ImageKit's URL generation, transformations, lazy-loading, and responsive image capabilities.

Important: The directive selector is img[ikSrc], meaning you must use ikSrc instead of the standard src attribute.

It preserves all HTML img attributes and additionally accepts the following ImageKit-specific inputs: