Angular SDK

This page provides an in-depth introduction to the Angular frontend framework library.

Tip

If you're ready to get coding, jump straight to our quick start.

On this page:

Overview
Get started with Angular
Transformations
Plugins
Sample projects

Overview

Cloudinary's Angular frontend framework library provides image rendering capabilities and plugins that you can implement using code that integrates seamlessly with your existing Angular application.

Tip

In this guide you'll learn how to get started with the Angular SDK, but if you are not familiar with Cloudinary, we advise starting with the Developer get started guide for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts.

You may also find our Glossary helpful to understand Cloudinary-specific terminology.

Architecture

The Angular frontend framework library must be used in conjunction with the Cloudinary JavaScript SDK to provide all of Cloudinary's transformation and optimization functionality.

Two GitHub repositories provide all the functionality:

js-url-gen contains all the functionality required to create delivery URLs for your Cloudinary assets based on the configuration and transformation actions that you specify. All the js-url-gen functionality is installed through the @cloudinary/url-gen package.
frontend-frameworks contains the framework libraries and plugins that can be used to render images and videos on your site. There are different installation packages for each framework, so for example, React is installed through @cloudinary/react, and Angular is installed through @cloudinary/ng.

Full example

This example shows a transformation URL being created using the @cloudinary/url-gen package, and rendered using Angular. It demonstrates the use of tree shaking to reduce the bundle size, which explains why there are so many import statements.

// In your app.module.ts inject the library:
import {CloudinaryModule} from '@cloudinary/ng';

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

// In your component.ts use `@cloudinary/url-gen` to generate your transformations.

import {Component, OnInit} from '@angular/core';
import {Cloudinary, CloudinaryImage} from '@cloudinary/url-gen';
import {Transformation} from '@cloudinary/url-gen';

// Import required actions.
import {thumbnail, scale} from '@cloudinary/url-gen/actions/resize';
import {byRadius} from '@cloudinary/url-gen/actions/roundCorners';
import {sepia} from '@cloudinary/url-gen/actions/effect';
import {source} from '@cloudinary/url-gen/actions/overlay';
import {opacity,brightness} from '@cloudinary/url-gen/actions/adjust';
import {byAngle} from '@cloudinary/url-gen/actions/rotate'

// Import required qualifiers.
import {image} from '@cloudinary/url-gen/qualifiers/source';
import {Position} from '@cloudinary/url-gen/qualifiers/position';
import {compass} from '@cloudinary/url-gen/qualifiers/gravity';
import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";
import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit{
  img: CloudinaryImage

  ngOnInit() {

    // Create and configure your Cloudinary instance.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    }); 

    // Use the image with public ID, 'front_face'.
    this.img = cld.image('front_face');

    // Apply the transformation.
    this.img
    .resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face())))  // Crop the image.
    .roundCorners(byRadius(20))    // Round the corners.
    .effect(sepia())  // Apply a sepia effect.
    .overlay(   // Overlay the Cloudinary logo.
      source(
        image('cloudinary_icon_blue')
          .transformation(new Transformation()
          .resize(scale(50)) // Resize the logo.
            .adjust(opacity(60))  // Adjust the opacity of the logo.
          .adjust(brightness(200)))  // Adjust the brightness of the logo.       
      )
      .position(new Position().gravity(compass('south_east')).offsetX(5).offsetY(5))   // Position the logo.
    )
    .rotate(byAngle(10))  // Rotate the result.
    .format('png');   // Deliver as PNG. */
  }
}

<!-- In your view add the advanced-image component and pass your Cloudinary image.-->
<advanced-image [cldImg]="img"></advanced-image>

This code creates the URL required to deliver the front_face.jpg image with the following transformations applied:

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 is generated from the above code:

https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon_blue/c_scale,w_50/o_60/e_brightness:200/fl_layer_apply,g_south_east,x_5,y_5/a_10/f_png/front_face

Learn more about transformations

See all possible transformations in the Transformation URL API reference.
See all JavaScript transformation actions and qualifiers in the js-url-gen reference.
See more examples of image and video transformations using the js-url-gen v1.x library.

Get started with Angular

Installation

Install Cloudinary's JavaScript and Angular packages using the NPM package manager:

npm i @cloudinary/url-gen @cloudinary/ng

Configuration

You can specify the configuration parameters that are used to create the delivery URLs, either using a Cloudinary instance or per image/video.

Note

Specify the configuration parameters in camelCase, for example cloudName.

Cloudinary instance configuration

If you want to use the same configuration to deliver all your media assets, it's best to set up the configuration through a Cloudinary instance, for example:

// In your app.module.ts inject the library:
import {CloudinaryModule} from '@cloudinary/ng';

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

// In your component.ts use `@cloudinary/url-gen` to set your configuration.

import {Component, OnInit} from '@angular/core';
import {Cloudinary, CloudinaryImage} from '@cloudinary/url-gen';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit{
  img: CloudinaryImage;

  ngOnInit() {

    // Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    });

    // cld.image returns a CloudinaryImage with the configuration set.
    this.img = cld.image('sample');

    // The URL of the image is: https://res.cloudinary.com/demo/image/upload/sample
  }
}

<!-- In your view add the advanced-image component and pass your Cloudinary image. -->
<advanced-image [cldImg]="img"></advanced-image>

You can set other configuration parameters related to your cloud and URL as required, for example, if you have your own custom domain name, and want to generate a secure URL (HTTPS):

// Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  },
  url: {
    secureDistribution: 'www.example.com', 
    secure: true 
  }
});

// This creates a URL of the form: https://www.example.com/demo/image/upload/sample

Asset instance configuration

If you need to specify different configurations to deliver your media assets, you can specify the configuration per image/video instance, for example:

// In your app.module.ts inject the library:
import {CloudinaryModule} from '@cloudinary/ng';

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

// In your component.ts use `@cloudinary/url-gen` to set your configuration.

import {Component, OnInit} from '@angular/core';
import {CloudinaryImage} from '@cloudinary/url-gen';
import {URLConfig} from '@cloudinary/url-gen';
import {CloudConfig} from '@cloudinary/url-gen';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit{
  img: CloudinaryImage;

  ngOnInit() {

    // Set the Cloud configuration and URL configuration
    const cloudConfig = new CloudConfig({cloudName: 'demo'});
    const urlConfig = new URLConfig({secure: true});

    // Instantiate and configure a CloudinaryImage object.
    this.img = new CloudinaryImage('docs/shoes', cloudConfig, urlConfig);

    // The URL of the image is: https://res.cloudinary.com/demo/image/upload/docs/shoes
  }
}

<!-- In your view add the advanced-image component and pass your Cloudinary image.-->
<advanced-image [cldImg]="img"></advanced-image>

Error

Unfortunately there's been an error sending your feedback.

Rate this page: