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:

Tip
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

Copy to clipboard
// 1. Import classes
//===================

// In your app.module.ts:

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

imports: [
  ...,
  CloudinaryModule,
],
...

// 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.
    this.img.resize(fill().width(250).height(250));

  }
}


// 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: