Angular
Real-time image resizing, automatic optimization, and file uploading in Angular using ImageKit.io.
This quick start guide shows you how to integrate ImageKit into an Angular application. The code samples covered here are hosted on GitHub: https://github.com/imagekit-samples/quickstart/tree/master/angular.
This guide walks you through the following topics:
For this tutorial, it is recommended to create an Angular dummy app, as shown below.
Create an Angular app:
We will be using the following in this guide:
- Node version 14.21.1
- Angular version 15
Let's use the
ng new <project name>
CLI utility provided by Angular to build a new project:ng new imagekit-angular-app
Navigate to the project directory:
cd imagekit-angular-app/
Open up the project in your text editor of choice, and navigate to
src/app/
. This is where we will do most of our work.Install libraries (if not already):
npm install
Now run the app:
npm start
In your web browser, navigate to
http://localhost:4200/
You should see the dummy app created by Angular CLI.
For simplicity, let's remove everything from
src/app/app.component.html
so we can begin with a clean slate.Let's add one line in
src/app/app.component.html
to title our page :<h1>Imagekit Angular Demo</h1>
Now we can begin our work.
Install the ImageKit Angular SDK:
Installing the ImageKit Angular SDK in our app is pretty simple:
npm install --save imagekitio-angular
Before the SDK can be used, let's learn about and obtain the requisite initialization parameters:
urlEndpoint
is a required parameter. This can be obtained from the URL-endpoint section or the developer section on your ImageKit dashboard.publicKey
andauthenticationEndpoint
parameters are optional and only needed if you want to use the SDK for client-side file upload. These can be obtained from the developer section on your ImageKit dashboard.
ImageKit Components:
The SDK includes 3 Components and the ability to access the core component:
Let's import the SDK.
src/app/app.module.ts
import { ImagekitioAngularModule } from 'imagekitio-angular';
...
@NgModule({
...
imports: [
...
ImagekitioAngularModule.forRoot({
publicKey: environment.publicKey,
urlEndpoint: environment.urlEndpoint,
authenticationEndpoint: environment.authenticationEndpoint
})
],
...
})
...
Loading image from relative path:
Let's use the default image that we have. It should be available at the following URL:
https://ik.imagekit.io/demo/default-image.jpg
Let's fetch and display it! For this, we will use the
ik-image
component.We use the tag
<ik-image>
for rendering images. For now, we will do a simple image rendering with a path
prop. For a full list of options, check hereLet's insert the following into
app.component.html
.src/app/app.component.html
<ik-image
urlEndpoint="https://ik.imagekit.io/demo/"
path="default-image.jpg">
</ik-image>
Rendered HTML element:
<img src="https://ik.imagekit.io/demo/default-image.jpg" _ngcontent-vpo-c15="" urlendpoint="https://ik.imagekit.io/demo/" path="default-image.jpg" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg">
Your Angular app should now display the default image in its full size:
.png?alt=media)
Full sized image (1000px x 1000 px)
You can pass styles and other attributes as props. For e.g. let's add 400px width by adding the
transformation.width
prop:Let's try creating a transformation object in
app.component.ts
.src/app/app.component.ts
import { Transformation } from 'imagekit-javascript/dist/src/interfaces/Transformation';
...
export class AppComponent {
...
transformation: Array<Transformation> = [{
width: "400"
}];
...
}
And now, we can use it in
app.component.html
as such:src/app/app.component.html
<ik-image
urlEndpoint="https://ik.imagekit.io/demo/"
path="default-image.jpg"
[transformation]="transformation"
>
</ik-image>
This is how the output should look now:

Resized image (width=400px)
Note that here we have set the width to 400px at the
<img>
tag level only. Intrinsically, the fetched image is still 1000px wide.Loading image from an absolute path:
If you have an absolute image path coming from the backend API e.g.
https://www.custom-domain.com/default-image.jpg
, then you can use the src
prop to load the image.For example:
<ik-image
src="https://ik.imagekit.io/demo/default-image.jpg"
>
</ik-image>
The output looks like this:

Render image on custom domain via absolute path
Let’s now learn how to manipulate images using transformations.
The Angular SDK gives a name to each transformation parameter, e.g.,
height
for h
and width
for the w
parameter. It makes your code more readable. If the property does not match any of the available options, it is added as it is. See the full list of supported transformations in Angular SDK on GitHub.You can also use
h
and w
parameters instead of height
and width
.
See the complete list of transformations supported in ImageKit here.Let’s resize the default image to 200px height and width:
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "200",
width: "200"
}];
...
}
src/app/app.component.html
<ik-image
urlEndpoint="https://ik.imagekit.io/demo/"
path="default-image.jpg"
[transformation]="transformation"
>
</ik-image>
Rendered HTML element:
<img src="https://ik.imagekit.io/demo/tr:h-400,w-400/default-image.jpg" _ngcontent-qos-c15="" urlendpoint="https://ik.imagekit.io/demo/" class="lazyload" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">
Refresh your browser to get the resized image.

Resized Image (200x200px)
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
width: "400",
quality: "10"
}];
...
}
Rendered HTML:
<img src="https://ik.imagekit.io/demo/tr:w-400,q-10/default-image.jpg" _ngcontent-hfw-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">

Quality manipulation (q=10)
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "300",
width: "200",
cropMode: "extract"
}];
...
}
Rendered HTML element:
<img src="https://ik.imagekit.io/demo/tr:h-300,w-200,cm-extract/default-image.jpg" _ngcontent-vjd-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">

Crop Mode Extract (200x300px)
Chained transformations provide a simple way to control the sequence in which transformations are applied.
First, we will apply resizing transformations:
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "300",
width: "200",
}];
...
}
Transformation URL:
<img src="https://ik.imagekit.io/demo/tr:h-300,w-200/default-image.jpg" _ngcontent-dsh-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">

Resized and cropped (200x300px)
Now, rotate the image by 90 degrees.
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "300",
width: "200",
}, {
rt: "90"
}
];
...
}
Chained Transformation URL:
<img src="https://ik.imagekit.io/demo/tr:h-300,w-200:rt-90/default-image.jpg" _ngcontent-cqk-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object],[object Object">

Resized, then rotated
Let’s flip the order of transformation and see what happens.
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
rt: "90"
},{
height: "300",
width: "200",
}
];
...
}
Chained Transformation URL:
<img src="https://ik.imagekit.io/demo/tr:rt-90:h-300,w-200/default-image.jpg" _ngcontent-lvp-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object],[object Object">

Rotated, then resized
For example, a text overlay can be used to superimpose text on an image. Try it like so:
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "300",
width: "300",
overlayText: 'ImageKit',
overlayTextFontSize: "50",
overlayTextColor: '0651D5',
}];
...
}
Rendered HTML element:
<img src="https://ik.imagekit.io/demo/tr:h-300,w-300,ot-ImageKit,ots-50,otc-0651D5/default-image.jpg" _ngcontent-twl-c15="" urlendpoint="https://ik.imagekit.io/demo/" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">

Text Overlay (300x300px)
You can lazy load images using the
loading
prop in the ik-image
component. When you use loading="lazy"
, all images that are immediately viewable without scrolling load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.The SDK uses a fixed threshold based on the effective connection type to ensure that images are loaded early enough so that they have finished loading once the user scrolls near to them.
You should always set the height and width of the image element to avoid layout shift when lazy-loading images.
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height: "300"
width: "400"
}];
...
}
You should always set the height and width of the image element to avoid layout shift when lazy-loading images.
src/app/app.component.html
<ik-image
path={{path}}
urlEndpoint="https://ik.imagekit.io/demo/"
[transformation]="transformation"
loading="lazy"
height="300"
width="400"
>
</ik-image>
Rendered HTML element:
<img src="https://ik.imagekit.io/demo/tr:h-300,w-400/default-image.jpg" _ngcontent-vnv-c15="" urlendpoint="https://ik.imagekit.io/demo/" loading="lazy" ng-reflect-url-endpoint="https://ik.imagekit.io/demo/" ng-reflect-loading="lazy" ng-reflect-path="default-image.jpg" ng-reflect-transformation="[object Object]">
To improve user experience, you can use a low-quality blurred variant of the original image as a placeholder while the original image is being loaded in the background. Once the loading of the original image is finished, the placeholder is replaced with the original image.
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
width: "400",
}];
lqip = {
active: true, quality: 20
};
...
}
src/app/app.component.html
<ik-image
path={{path}}
urlEndpoint="https://ik.imagekit.io/demo/"
[transformation]="transformation"
[lqip]="lqip"
>
</ik-image>
You have the option to lazy-load the original image only when the user scrolls near them. Until then, only a low-quality placeholder is loaded. This saves a lot of network bandwidth if the user never scrolls further down.
src/app/app.component.ts
...
transformation: Array<Transformation> = [{
height:"300",
width: "400",
}];
lqip = {
active: true
};
...
}
src/app/app.component.html
// Loading a blurred low quality image placeholder
// and lazy-loading original when the user scrolls near them
<ik-image
path={{path}}
urlEndpoint="https://ik.imagekit.io/demo/"
[transformation]="transformation"
[lqip]="lqip"
loading="lazy"
>
</ik-image>
Let's now learn how to upload an image to our media library.
Angular SDK provides
ik-upload
component, which renders an input type="file"
tag that you can use to upload files to the ImageKit media library directly from the client-side.To implement this functionality, a backend server is needed to authenticate the request using your API private key.
For this quickstart guide, we will create a sample Node.js server that will provide an authentication endpoint at
http://localhost:3000/auth
.Let's a new folder,
server
, and create files app.js
and package.json
inside the new folder in the project root.mkdir server
touch server/app.js
Package.json should look like:
{
"name": "server",
"version": "1.0.0",
"description": "Sample server for file upload using Imagekit SDK",
"main": "app.js",
"scripts": {
"server": "nodemon app"
},
"devDependencies": {
"cors": "^2.8.5",
"crypto": "^1.0.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"nodemon": "^2.0.2",
"router": "^1.3.3",
"uuid": "^3.3.3"
}
}
Now do
npm install
.Next we setup the content for
app.js
.app.js
server/app.js
const dotenv = require('dotenv');
const express = require('express');
const router = express.Router();
var cors = require('cors');
const app = express();
app.use(cors());
dotenv.config();
const uuid = require('uuid');
const crypto = require("crypto");