Programmable Media

Angular SDK

Last updated: Aug-04-2024

This page provides an in-depth introduction to the Angular frontend framework library.

Tip
If you're ready to get coding, jump straight to our quick start.

Overview

Cloudinary's Angular frontend framework library provides image rendering capabilities and plugins that you can implement using code that integrates seamlessly with your existing Angular application.

Quick example

This example shows a transformation URL being created using the @cloudinary/url-gen package, and rendered using Angular.

Note
If you're not using standalone components, then you'll need to import the CloudinaryModule in app.module.ts instead.

This code creates the HTML required to deliver the front_face.jpg image with the sepia effect applied.

sample transformation

You can apply more than one transformation at a time (see chained transformations) to give more interesting results:

sample transformation
  • Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
  • Round the corners with a 20 pixel radius
  • Apply a sepia effect
  • Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
  • Rotate the resulting image (including the overlay) by 10 degrees
  • Convert and deliver the image in PNG format (the originally uploaded image was a JPG)

Tip

There are alternative ways to apply transformations to your images, for example:

Learn more about transformations

Tip
Take a look at our Angular sample projects to help get you started.

Get started with Angular

Installation

Install Cloudinary's JavaScript and Angular packages using the NPM package manager:

Note
To install special versions of Angular packages, for example release candidates (RC) or Beta versions, we advise using the --legacy-peer-deps flag.

Configuration

You can specify the configuration parameters that are used to create the delivery URLs, either using a Cloudinary instance or per image/video.

Note
Specify the configuration parameters in camelCase, for example cloudName.

Cloudinary instance configuration

If you want to use the same configuration to deliver all your media assets, it's best to set up the configuration through a Cloudinary instance, for example:

Note
If you're not using standalone components, then you'll need to import the CloudinaryModule in app.module.ts instead.

You can set other configuration parameters related to your cloud and URL as required, for example, if you have your own custom delivery hostname, and want to generate a secure URL (HTTPS):

Asset instance configuration

If you need to specify different configurations to deliver your media assets, you can specify the configuration per image/video instance, for example:

Note
If you're not using standalone components, then you'll need to import the CloudinaryModule in app.module.ts instead.

Transformations

The @cloudinary/url-gen package simplifies the generation of transformation URLs, and includes special components and directives for easy embedding of assets in your Angular application.

Image with several transformations applied

The @cloudinary/url-gen package installs an additional transformation-builder-sdk library as a dependency, which handles the transformation generation part of the URL.

You can use the Transformation Builder reference to find all available transformations, syntax and examples.

To find out more about transforming your assets using the @cloudinary/url-gen package, see:

Plugins

The Cloudinary Angular library provides plugins to render the media on your site in the optimal way and improve your user's experience by automating media tasks like lazy loading, responsive images and more.

Sample projects

Take a look at the Angular sample projects page to help you get started integrating Cloudinary into your Angular application.

Tip
Check out our collection of Angular code explorers too!

✔️ Feedback sent!

Rate this page: