Angular SDK v2 quickstart guide (Beta)

In this quickstart guide you'll learn how to start delivering your media from Cloudinary using Angular.

Two libraries are required:

To get a more in-depth understanding of the architecture, you may want to start from the Angular SDK v2 introduction.

1. Install packages

Install the required packages using the NPM package manager:

Copy to clipboard
npm i @cloudinary/base @cloudinary/angular

2. Add Cloudinary to your code

This step assumes that you have assets already uploaded in your account. To upload files within your app, see Angular SDK v2 image and video upload. Additionally, you can use the CLI to upload files programmatically, or log into your Media Library to upload files manually.

Copy to clipboard
// 1. Import classes

// In your app.module.ts:

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/angular';

imports: [

// In your component.ts: 

// Import the Cloudinary classes.
import {Cloudinary, CloudinaryImage} from "@cloudinary/base";

// Import any actions required for transformations.
import {fill} from "@cloudinary/base/actions/resize";

export class AppComponent {
  img: CloudinaryImage;

  ngOnInit() {

    // 2. Set your cloud name

    // Create a Cloudinary instance and set your cloud name.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'

    // 3. Get your image

    // Instantiate a CloudinaryImage object for the image with the public ID, 'sample'.
    this.img = cld.image('sample');

    // 4. Transform your image

    // Resize to 250 x 250 pixels using the 'fill' crop mode.


// 5. Deliver your image
// =========================

// In your view, render the image in an Angular component.
<advanced-image [cldImg]="img"></advanced-image>

3. See the result!

Transformed sample image

Ready to learn more?

  • See some complete code examples in our sample projects.
  • Understand the architecture of the Angular SDK v2 and get a more detailed overview of the libraries.
  • Find out more about transforming images using cloudinary-js-base.
  • Learn about transforming videos using cloudinary-js-base.
  • Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

Rate this page: