-
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>Details