Last updated: Apr-08-2023
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.
For details on all new features and fixes from previous versions, see the CHANGELOG.
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-13.x).
Take a look at the following transformation code and the image it delivers:
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:
In a similar way, you can transform a video.
- Image transformations
- Video transformations (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)
This section includes installation and setup instructions for:
Angular 1.x support is provided through the bower package manager:
cloudinary-core (legacy SDK), and the Cloudinary AngularJS 1.x SDK.
--save parameter saves the dependency in your
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.
Most functionality implemented on the client side does not require authentication, so only your
cloud_name is required to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use signed uploads or generate delivery signatures, you'll also need server-side code, for which you can use one of our backend SDKs.
<version>: Install the Cloudinary Angular SDK package that supports the Angular version you are using:
- For Angular 2, use
- For Angular 4, use
- For Angular 5-13, use
5.x. For example:
- If you install
@cloudinary/angularwith 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
ng-file-uploadto upload your assets and to install only the
- If you decide to use the jQuery-file-upload with blueimp for uploading your assets, you can install the
For details, see Angular image and video upload
For some bundlers, you need to edit certain files to integrate with the Cloudinary Angular (2.x or later) library.
systemjs.config.js file, add the cloudinary configuration to the
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.
rollup-config.js, under the
plugins field, add:
Add the relevant Cloudinary imports and specify your
cloud_name and any other required 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.
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 product environment credentials in the dashboard of our Cloudinary Console.
- Most functionality implemented on the client side does not require authentication, so only your
cloud_nameis required to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use signed uploads or generate delivery signatures, you'll also need server-side code, for which you can use one of our backend SDKs.
- For backward compatibility reasons, the default value of the optional
secureconfiguration parameter is
false. However, for most modern applications, it's recommended to configure the
trueto ensure that your transformation URLs are always generated as HTTPS.
The Angular SDKs provide a set of sample projects that can help you get started with your own.
|Photo Album with jQuery||Uses the Cloudinary
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.
|Angular CLI sample||CLI|
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.|