# cloudinary/cloudinary_angular architecture

> Architecture diagram of the GitHub repository cloudinary/cloudinary_angular, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cloudinary/cloudinary_angular
- Repository: https://github.com/cloudinary/cloudinary_angular

## Overview

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: [`projects/angular-cld/src/lib/cloudinary.service.ts`](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.service.ts) (Cloudinary service), [`projects/angular-cld/src/lib/cloudinary-image.component.ts`](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image.component.ts) (Image component), [`projects/angular-cld/src/lib/cloudinary.module.ts`](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.module.ts) (Cloudinary module), [`projects/angular-cld/src/lib/cloudinary-transformation.directive.ts`](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-transformation.directive.ts) (Transformation directive)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_setup["Angular setup"]
  node_module["Cloudinary module"]
  node_config["Configuration"]
end

subgraph group_render["Media rendering"]
  node_image["Image component"]
  node_video["Video component"]
end

subgraph group_directives["Media directives"]
  node_transform["Transformation directive"]
  node_image_source["Image source directive"]
  node_background["Background image"]
  node_lazy["Lazy loading"]
  node_placeholder["Placeholder"]
end

subgraph group_integration["Cloudinary integration"]
  node_service["Cloudinary service"]
  node_core["Cloudinary JS"]
  node_analytics["SDK analytics constants"]
end

node_app(("Angular app"))

node_app -->|"configures"| node_module
node_module -->|"accepts"| node_config
node_module -->|"provides"| node_service
node_service -->|"wraps"| node_core
node_image -->|"requests image tag"| node_service
node_video -->|"requests video tag"| node_service
node_image_source -->|"requests URL"| node_service
node_image -->|"reads transformations"| node_transform
node_video -->|"reads transformations"| node_transform
node_image_source -->|"reads transformations"| node_transform
node_image -->|"updates placeholder"| node_placeholder
node_image -->|"merges constants"| node_analytics
node_background --> node_service
node_lazy -.-> node_image

click node_module "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.module.ts"
click node_config "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-configuration.class.ts"
click node_service "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.service.ts"
click node_image "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image.component.ts"
click node_video "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-video.component.ts"
click node_transform "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-transformation.directive.ts"
click node_image_source "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image-source.directive.ts"
click node_background "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-background-image.directive.ts"
click node_lazy "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-lazy-load.directive.ts"
click node_placeholder "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-placeholder.component.ts"
click node_analytics "https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/SDKAnalyticsConstants.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_module,node_config toneBlue
class node_image,node_video toneAmber
class node_transform,node_image_source,node_background,node_lazy,node_placeholder toneMint
class node_service,node_core,node_analytics toneRose
class node_app toneIndigo
```

## Components

### Angular setup

- [Cloudinary module](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.module.ts): `projects/angular-cld/src/lib/cloudinary.module.ts`
- [Configuration](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-configuration.class.ts): `projects/angular-cld/src/lib/cloudinary-configuration.class.ts`

### Media rendering

- [Image component](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image.component.ts): `projects/angular-cld/src/lib/cloudinary-image.component.ts`
- [Video component](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-video.component.ts): `projects/angular-cld/src/lib/cloudinary-video.component.ts`

### Media directives

- [Transformation directive](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-transformation.directive.ts): `projects/angular-cld/src/lib/cloudinary-transformation.directive.ts`
- [Image source directive](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image-source.directive.ts): `projects/angular-cld/src/lib/cloudinary-image-source.directive.ts`
- [Background image](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-background-image.directive.ts): `projects/angular-cld/src/lib/cloudinary-background-image.directive.ts`
- [Lazy loading](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-lazy-load.directive.ts): `projects/angular-cld/src/lib/cloudinary-lazy-load.directive.ts`
- [Placeholder](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-placeholder.component.ts): `projects/angular-cld/src/lib/cloudinary-placeholder.component.ts`

### Cloudinary integration

- [Cloudinary service](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary.service.ts): `projects/angular-cld/src/lib/cloudinary.service.ts`
- **Cloudinary JS**
- [SDK analytics constants](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/SDKAnalyticsConstants.ts): `projects/angular-cld/src/lib/SDKAnalyticsConstants.ts`

### Other components

- **Angular app**

## Connections

- 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