How cloudinary/cloudinary_angular works
This legacy Angular SDK turns Angular configuration and media-element inputs into Cloudinary image and video URLs and HTML attributes. The main workflow is to configure CloudinaryModule, provide a media public ID and transformation directives, then let the image or video component build and apply the resulting tag. The SDK also exposes URL-source and background-image directives, lazy loading, placeholders, responsive images, and analytics-related behavior. The README documents transformation, optimization, and image/video tag generation; some peripheral implementations were not sampled, so their wiring is not inferred here.
Main entry points: cloudinary.service.ts Cloudinary service · cloudinary-image.component.ts Image component · cloudinary.module.ts Cloudinary module · cloudinary-transformation.directive.ts Transformation directive
Components 13
Angular setup
- Cloudinary module
projects/angular-cld/src/lib/cloudinary.module.ts - Configuration
projects/angular-cld/src/lib/cloudinary-configuration.class.ts
Media rendering
- Image component
projects/angular-cld/src/lib/cloudinary-image.component.ts - Video component
projects/angular-cld/src/lib/cloudinary-video.component.ts
Media directives
- Transformation directive
projects/angular-cld/src/lib/cloudinary-transformation.directive.ts - Image source directive
projects/angular-cld/src/lib/cloudinary-image-source.directive.ts - Background image
projects/angular-cld/src/lib/cloudinary-background-image.directive.ts - Lazy loading
projects/angular-cld/src/lib/cloudinary-lazy-load.directive.ts - Placeholder
projects/angular-cld/src/lib/cloudinary-placeholder.component.ts
Cloudinary integration
- Cloudinary service
projects/angular-cld/src/lib/cloudinary.service.ts - Cloudinary JS
- SDK analytics constants
projects/angular-cld/src/lib/SDKAnalyticsConstants.ts
Other components
- Angular app
Connections 14
- Angular app → Cloudinary module: configures
- Cloudinary module → Configuration: accepts
- Cloudinary module → Cloudinary service: provides
- Cloudinary service → Cloudinary JS: wraps
- Image component → Cloudinary service: requests image tag
- Video component → Cloudinary service: requests video tag
- Image source directive → Cloudinary service: requests URL
- Image component → Transformation directive: reads transformations
- Video component → Transformation directive: reads transformations
- Image source directive → Transformation directive: reads transformations
- Image component → Placeholder: updates placeholder
- Image component → SDK analytics constants: merges constants
- Background image → Cloudinary service
- Lazy loading → Image component