Viewing: console.cloudinary.com

Image & Video APIs

Copy for LLM Download Markdown Get Started Agent Skills

Last updated: Jun-02-2026

Overview

Learn how to install and configure the Cloudinary Angular SDK in your Angular environment. This tutorial covers adding the Cloudinary packages to your project, configuring your cloud name, and using the Angular SDK components to display and transform images.

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

Video tutorial

This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

Download Transcript

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Why use Cloudinary with Angular?


[Jump to this spot in the video]0:00	Working with images and videos in Angular can be challenging. Handling media optimization, responsive design, and performance often requires complex setups and third-party tools. You can simplify it all by using Cloudinary, which makes it easy to manage, optimize, and deliver your media seamlessly within your Angular projects.

What Cloudinary offers


[Jump to this spot in the video]0:22	Cloudinary offers a rich set of features to make working with images and videos easy. Whether it's delivering optimized media, dynamically transforming images and videos, or managing uploads efficiently, Cloudinary has you covered. You can serve responsive images tailored to your users' devices or add seamless video streaming to your app, all with just a few lines of code.

Getting started


[Jump to this spot in the video]0:45	In this video, you'll learn how to get started with Cloudinary in an Angular app. Let's start off in an existing Angular app.

Install the Angular SDK


[Jump to this spot in the video]0:52	First, install the Cloudinary Angular SDK. You need two packages: `@cloudinary/url-gen` for building transformation URLs and `@cloudinary/ng` for Angular-specific components. Install them using npm:

Configure Cloudinary


[Jump to this spot in the video]1:20	Configure the SDK for your product environment by setting your cloud name. Create a new Cloudinary instance and specify your cloud name. You can find your cloud name in the Console.

Display an image


[Jump to this spot in the video]2:20	Use the `AdvancedImage` component from `@cloudinary/ng` to display images in your Angular app. Reference an image in your product environment using the `image` method with a public ID, then pass it to the `AdvancedImage` component.

Resize the image


[Jump to this spot in the video]2:44	With Cloudinary, you can resize images on the fly, delivering a transformed image while keeping the original intact. Import `fill` from `@cloudinary/url-gen/actions/resize` and apply it to your image. This type of crop keeps as much of the image as possible within the dimensions you specify.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

Feedback sent!