AngularSDK

Description

The Cloudinary Angular SDK contains components like <advanced-image> to easily render your media assets from Cloudinary. The SDK also comes with support for optional JS plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness.

Examples

Please note that the order of the plugins is important. See Plugin Order for more details.

// In your app.module.ts inject the library.
			import { CloudinaryModule} from '@cloudinary/angular';
			
			imports: [
			  ...,
			  CloudinaryModule,
			],
			
			// In your component.ts use `@cloudinary/url-gen` to generate your transformations.
			// Import the plugins you wish to use
			
			import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
			import {
			 AdvancedImage,
			 accessibility,
			 responsive,
			 lazyload,
			 placeholder
			} from '@cloudinary/angular';
			
			ngOnInit() {
			  const myCld = new Cloudinary({ cloudName: 'demo'});
			  this.img = myCld().image('sample');
			
			  this.plugins = [lazyload(), placeholder()]
			}
			
			// In your view add the component with your transformation.
			<advanced-image [cldImg]="this.img" [plugins]="this.plugins"></advanced-image>