Angular integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery. All your media resources are optimized and delivered through a fast CDN using industry best practices.

Using Cloudinary's Angular SDK, you can perform smart image and video manipulations using code that integrates seamlessly with your existing Angular application and deliver optimized and responsive media to your users.

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 (currently, Angular 2 and Angular 4).

Quick example

The following Cloudinary URL and corresponding Angular SDK code generates the image below including all of the following transformations:

• A thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
• Rotated 20 degrees
• Sepia effect
• Cloudinary logo overlay on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opaqueness = 60%)
• 10 degree rotation
• Converted to and delivered in PNG format (the originally uploaded image was a JPG)

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

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)

Getting started

This section describes the information you need to know for installing and setting up the AngularJS or Angular SDK, including links to sample projects that can help you get started more quickly.

SDK Installation and Setup

This section includes installation and setup instructions for:

• AngularJS (version 1)
• Angular (version 2 and later)

AngularJS (version 1)

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

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:

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

Angular 2 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:

npm install cloudinary-core @cloudinary/angular-<Angular version> --save

<Angular version>: Enter the Angular SDK package that corresponds to the version of Angular you are using, such as 2.x or 4.x. For example:

npm install cloudinary-core @cloudinary/angular-4.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-4.x is specified.

  System.config({
    ...
    map: {
      // Cloudinary lib
      '@cloudinary/angular': 'npm:@cloudinary/angular-4.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:

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-4.x is specified.

  import { CloudinaryModule } from '@cloudinary/angular-4.x';
  import * as  Cloudinary from 'cloudinary-core';

And

  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 parameters if relevant. For details, see Configuration parameters.

For example:

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

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)

Samples for Angular (version 2 or later)

You can also experiment with the following live Angular SDK examples:

• Codepen
• Plunker
• Glitch