Angular quick start | Documentation

Image & Video APIs

Last updated: Dec-17-2025

This quick start lets you get an end-to-end implementation up and running using the Angular SDK in 5 minutes or less.

On this page:

Prerequisites

Notes

This quick start is designed for quick onboarding. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.
If you aren't familiar with Cloudinary, you may want to first take a look at the Developer Kickstart for a hands-on, step-by-step introduction to Cloudinary features.
You may also find our Glossary helpful to understand Cloudinary-specific terminology.

1. Set up and configure the SDK

Install the packages

Install the required packages using the NPM package manager:

Tip

If you prefer not to use a bundler, you can import the packages directly from a CDN. See CDN import for details.

More info about the packages...

Tips:

To get a more in-depth understanding of the architecture, you may want to take a look at the Angular SDK introduction.
To start with full example apps, see Angular sample projects.

Configure Cloudinary

Create a basic Angular app, and in app.component.ts import the CloudinaryModule:

app.component.ts

Note

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

Then, in app.component.ts, import the Cloudinary classes, create a Cloudinary instance and set your cloud name:

app.component.ts (continued)

More info about configuration...

2. Upload an image

If you changed the cloud name in the previous step to your own, you need to use an image that's stored in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then upload it to Cloudinary.

Note

For convenience, the instruction below shows you how to manually upload files in the Cloudinary console UI, but as a developer, you'll probably be interested in uploading files programmatically. There are several ways to do this in client-side only applications, as explained in Angular SDK image and video upload or you can use the CLI.

For the purposes of this quick start, the quickest way to upload a single image is as follows:

Log into your Cloudinary Console.
Select Media Library from the left panel.
Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the public ID field.
Click Browse to find the image to upload. Once uploaded, you can see the image in the listed assets (set Creation date to Today in the Search to find it quickly).

In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to docs/models). If using one of the sample images, double click the asset to open the Manage page, navigate to the Summary tab, and copy the Public ID:

Note

If your product environment uses the legacy fixed folder mode, you won't see the public ID at the bottom of the Summary tab. Instead, it's located at the top left corner of the Manage page.

3. Transform and deliver the image

Copy and paste this import statement below the existing ones:

app.component.ts (continued)

Copy and paste the following code in the ngOnInit function, under the configuration code:

app.component.ts (continued)

Note

If you're using an image with a public ID other than docs/models, make sure to update your code with the public ID of the image you're delivering.

Copy and paste the following code into app.component.html:

app.component.html

More info about transformations...

app.component.ts (continued)

app.component.html

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

4. Run your code

Run the code to see the transformed image.

Transformed models image

View the completed code

Here's the full example:

This code is also available in GitHub.

Ready to learn more?

Understand the architecture of the Angular SDK and get a more detailed overview of the libraries.
Find out more about transforming images using @cloudinary/url-gen.
Learn about transforming videos using @cloudinary/url-gen.
Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: