Angular quick start

Last updated: Nov-14-2022

This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.

You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.

You can also view the completed code of this quick start in a GitHub repo and code explorer.

Tip
If you aren't familiar with Cloudinary, you may want to first take a look at 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.

Two libraries are required:

Tip
To get a more in-depth understanding of the architecture, you may want to start from the Angular SDK introduction.

Prerequisites

To perform the steps in this quick start, you'll need:

1. Set up and configure the SDK

Install the packages

Install the required packages using the NPM package manager:

Copy to clipboard
npm i @cloudinary/url-gen @cloudinary/ng

Configure Cloudinary

Create a basic Angular app, and in app.module.ts copy and paste the following:

app.module.ts

Copy to clipboard
// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/ng';

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

Then, in app.component.ts, copy and paste the following:

app.component.ts

Copy to clipboard
import {Component, OnInit} from '@angular/core';

// Import the Cloudinary classes.
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 and set your cloud name.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    });
  }
}

2. Transform and deliver an image

Note
This step assumes that you have assets already uploaded to Cloudinary. To upload files, see Angular SDK image and video upload. Additionally, you can use the CLI to upload files programmatically, or log into your Media Library to upload files manually.

Copy and paste this import statement below the existing ones:

app.component.ts (continued)

Copy to clipboard
import {fill} from "@cloudinary/url-gen/actions/resize";

Copy and paste the following code in the ngOnInit function, under the configuration code:

app.component.ts (continued)

Copy to clipboard
    // Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'.
    this.img = cld.image('docs/models');

    // Resize to 250 x 250 pixels using the 'fill' crop mode.
    this.img.resize(fill().width(250).height(250));

Note
If you're using your own cloud name, rather than demo, then you need to change docs/models to the public ID of an image you've already uploaded to Cloudinary.

Copy and paste the following code into app.component.html:

app.component.html

Copy to clipboard
<!-- In your view, render the image in an Angular component.-->
<advanced-image [cldImg]="img"></advanced-image>

3. Run your code

Run the code to see the transformed image.

Transformed models image

View the completed code

Here's the full example:

This code is also available in GitHub.

Ready to learn more?

  • Understand the architecture of the Angular SDK and get a more detailed overview of the libraries.
  • Find out more about transforming images using @cloudinary/url-gen.
  • Learn about transforming videos using @cloudinary/url-gen.
  • Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

Rate this page: