Configure the Angular SDK (video tutorial)

Overview

Learn how to install and configure the Cloudinary Angular SDK in your Angular environment. This tutorial covers adding the Cloudinary packages to your project, configuring your cloud name, and using the Angular SDK components to display and transform images.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Why use Cloudinary with Angular?

0:00	Working with images and videos in Angular can be challenging. Handling media optimization, responsive design, and performance often requires complex setups and third-party tools. You can simplify it all by using Cloudinary, which makes it easy to manage, optimize, and deliver your media seamlessly within your Angular projects.

What Cloudinary offers

0:22	Cloudinary offers a rich set of features to make working with images and videos easy. Whether it's delivering optimized media, dynamically transforming images and videos, or managing uploads efficiently, Cloudinary has you covered. You can serve responsive images tailored to your users' devices or add seamless video streaming to your app, all with just a few lines of code.

Getting started

0:45	In this video, you'll learn how to get started with Cloudinary in an Angular app. Let's start off in an existing Angular app.

Install the Angular SDK

0:52	First, install the Cloudinary Angular SDK. You need two packages: @cloudinary/url-gen for building transformation URLs and @cloudinary/ng for Angular-specific components. Install them using npm:

Configure Cloudinary

1:20	Configure the SDK for your product environment by setting your cloud name. Create a new Cloudinary instance and specify your cloud name. You can find your cloud name in the Console.

Display an image

2:20	Use the AdvancedImage component from @cloudinary/ng to display images in your Angular app. Reference an image in your product environment using the image method with a public ID, then pass it to the AdvancedImage component.

Resize the image

2:44	With Cloudinary, you can resize images on the fly, delivering a transformed image while keeping the original intact. Import fill from @cloudinary/url-gen/actions/resize and apply it to your image. This type of crop keeps as much of the image as possible within the dimensions you specify.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.