Angular SDK

Overview

Cloudinary's Angular SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Angular application.

Related topics
This guide relates to the latest released version of the Cloudinary Angular library.

For details on all new features and fixes from previous versions, see the CHANGELOG.

Supported versions

Cloudinary's Angular support includes separate libraries for integration with AngularJS (also known as Angular 1.x) and with Angular versions 2.x and later (supported versions: 2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x, 10.x).

Quick example

Take a look at the following transformation code and the image it delivers:

Angular:
Copy to clipboard
<cl-image public-id="front_face.png" secure="true">
  <cl-transformation width="150" height="150" gravity="face" crop="thumb">
  </cl-transformation>
  <cl-transformation radius="20">
  </cl-transformation>
  <cl-transformation effect="sepia">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue" gravity="south_east" x="5" y="5" width="50" opacity="60" effect="brightness:200">
  </cl-transformation>
  <cl-transformation angle="10">
  </cl-transformation>
</cl-image>
sample transformation

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

  • 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)

And here's the URL that would be included in the image tag that's automatically generated from the above code:

Angular SDK features

  • Image manipulations
  • Video manipulations (not supported for Angular JS)
  • Transforming resources dynamically (transformations on events)
  • Direct image and video upload (using the Upload widget or tools such as ng2-file-upload or JQuery-file-upload with Blueimp)

SDK installation and setup

This section includes installation and setup instructions for:

AngularJS (version 1.x)

The Cloudinary Angular SDK serves as a layer on top of Cloudinary's Javascript library. Angular 1.x support is provided through the bower package manager:

1. Install the AngularJS SDK

Copy to clipboard
bower install cloudinary_ng#1.x --save

This command installs AngularJS (if not already installed), the Cloudinary JavaScript SDK (cloudinary-core), and the Cloudinary AngularJS 1.x SDK.

The optional --save parameter saves the dependency in your package.json file.

2. Set Cloudinary configuration parameters

To use the Cloudinary AngularJS library, you have to configure at least your cloud_name. You can additionally define a number of optional configuration parameters if relevant.

For example:

Copy to clipboard
yourApp.config(['cloudinaryProvider', function (cloudinaryProvider) {
  cloudinaryProvider
      .set("cloud_name", "mycompany")
      .set("secure", true)
      .set("upload_preset", "my_preset");
}]);

Angular 2.x and later

1. Install the Javascript SDK and the Angular SDK for the relevant Angular version

The Cloudinary Angular SDKs serve as a layer on top of Cloudinary's Javascript library. Install the Cloudinary Javascript library and the relevant version of the Angular SDK in the format:

Copy to clipboard
npm install cloudinary-core @cloudinary/angular-<version> --save

<version>: Install the Cloudinary Angular SDK package that supports the Angular version you are using:

  • For Angular 2, use 2.x
  • For Angular 4, use 4.x
  • For Angular 5-9, use 5.x. For example:
Copy to clipboard
npm install cloudinary-core @cloudinary/angular-5.x --save

Notes

  • If you install @cloudinary/angular with no version specified, the support for Angular 2.x is installed.
  • In most cases, it is recommended to use the Cloudinary Upload Widget or an upload tool such as ng2-file-upload or ng-file-upload to upload your assets and to install only the cloudinary-core javascript library.
  • If you decide to use the jQuery-file-upload with blueimp for uploading your assets, you can install the cloudinary-jquery-file-upload package instead.

For details, see Angular image and video upload

2. Configure your bundler to work with the Cloudinary Angular SDK

For some bundlers, you need to edit certain files to integrate with the Cloudinary Angular (2.x or later) library.

For SystemJS:

In your systemjs.config.js file, add the cloudinary configuration to the map and packages sections. In the map section, make sure to specify the correct version for the Angular version you are using. In the example below, angular-5.x is specified.

Copy to clipboard
  System.config({
    ...
    map: {
      // Cloudinary lib
      '@cloudinary/angular': 'npm:@cloudinary/angular-5.x',
      'cloudinary-core': 'npm:cloudinary-core',

    },
    packages: {
      ...
      "@cloudinary/angular": {
        main: 'index.js',
        defaultExtension: 'js'
      },
      "cloudinary-core": {
        main: 'cloudinary-jquery-file-upload.js',
        defaultExtension: 'js'
      }

    }
  });
For Rollup:

In rollup-config.js, under the plugins field, add:

Copy to clipboard
export default {
 ...
 plugins: [
     nodeResolve({jsnext: true, module: true}),
     commonjs({
       include: [
       ...
       'node_modules/@cloudinary/angular/**',
       'node_modules/cloudinary-core/**',
       ],
       namedExports: {
         'cloudinary-core/cloudinary-core-shrinkwrap': [ 'Cloudinary' ],
         '@cloudinary/angular': [ 'CloudinaryModule', 'Cloudinary' ],
       }
     }),
 ]
}

3. In app.module.ts, import Cloudinary

Add the relevant Cloudinary imports and specify your cloud_name and any other required account configuration parameters. Make sure to specify the correct version for the Angular version you are using. In the example below, angular-5.x is specified.

Copy to clipboard
  import { CloudinaryModule } from '@cloudinary/angular-5.x';
  import * as  Cloudinary from 'cloudinary-core';

And

Copy to clipboard
  imports: [
   ....
   .... 
    CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'mycloudname'}),
  ],

Set Cloudinary configuration parameters

In the imports or providers section of your app.module.ts (as relevant for your bundler), you must configure at least your cloud_name. You can additionally define a number of optional configuration parameters if relevant. You can find your account-specific configuration credentials in the dashboard of our Management Console.

For example:

Copy to clipboard
CloudinaryModule.forRoot(Cloudinary, 
    {cloud_name: 'mycompany', upload_preset: 'mypreset', private_cdn: true, 
     cname: 'mycompany.images.com'}),

Using core Cloudinary JavaScript features

The Cloudinary JavaScript library is the foundation library underlying Cloudinary's Angular SDK. You can access any of the core JavaScript functionality within your Angular code after importing the core library. For example:

Copy to clipboard
import { Component } from '@angular/core';
import { Cloudinary } from '@cloudinary/angular-5.x'; 
export class AppComponent {
  constructor(private cloudinary: Cloudinary) {
    // <img src="https://res.cloudinary.com/demo/image/upload/dog.jpg" />
    console.log(cloudinary.cloudinaryInstance.image('dog')); 
  }
}

Sample projects

The Angular SDKs provide a set of sample projects that can help you get started with your own.

Samples for AngularJS (version 1)

Project Notes
Photo Album Uses ng-file-upload to upload files
Photo Album with jQuery Uses the Cloudinary jquery-file-upload to upload files

Samples for Angular (version 2 or later)

The following samples link to the master branch of the sample apps. Parallel examples are available for all earlier supported versions of Angular as well.

Project Bundler used Notes
Angular CLI sample CLI
Angular Universal sample Webpack A minimal Angular starter for Universal JavaScript using TypeScript and Webpack.
Utilizes packages from the Angular Universal repository to enable Lazy Loading.
Photo album sample app Webpack Uses ng2-file-upload for uploading files
Photo album sample app with jQuery SystemJS Uses Cloudinary's jQuery plugin for uploading files using jQuery and blueimp.

✔️ Feedback sent!

Rate this page: