> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular sample projects


We've created some sample projects to get you started with integrating Cloudinary into your Angular application. 
> **TIP**: Check out our collection of [Angular code explorers](code_explorers) too!

## Photo Album

Adhering to Angular best practices, the [Photo Album app](https://github.com/cloudinary-devs/angular-photo-album) demonstrates uploading and displaying images. See how to upload images to your product environment using the [Upload widget](upload_widget) and the [REST API](client_side_uploading#direct_call_to_the_api), automatically [tagging](tags) them as they're uploaded. Then see how each of the tagged images is transformed on the fly and displayed on the site.

This is the Photo Album app in action:

Here's an excerpt from the code showing the [advanced-image component](angular_image_transformations#image_transformations_with_angular) being used to deliver a [square thumbnail image](angular_image_transformations#resizing_and_cropping), automatically focused on the most interesting part of the image, and automatically [optimized for format and quality](angular_image_transformations#image_optimizations). The [placeholder plugin](angular_image_transformations#image_placeholders) is used to load a low quality image initially, until the full image is downloaded, preserving the layout.

cld-image.component.ts

```angular

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CloudinaryModule, placeholder } from '@cloudinary/ng';
import { Cloudinary, CloudinaryImage } from '@cloudinary/url-gen';
import { environment } from '../../environments/environment';
import { thumbnail } from '@cloudinary/url-gen/actions/resize';
import { autoGravity } from '@cloudinary/url-gen/qualifiers/gravity';
import { format, quality } from '@cloudinary/url-gen/actions/delivery';

@Component({
  selector: 'app-cld-image',
  standalone: true,
  imports: [CommonModule, CloudinaryModule],
  templateUrl: './cld-image.component.html',
  styleUrl: './cld-image.component.css',
})
export class CldImageComponent {
  @Input() publicId: string = '';

  myImage!: CloudinaryImage;
  plugins = [placeholder()];

  ngOnInit(): void {
    const cld = new Cloudinary({
      cloud: {
        cloudName: environment.CLOUD_NAME,
      },
    });
    this.myImage = cld
      .image(this.publicId)
      .resize(thumbnail().width(300).height(300).gravity(autoGravity()))
      .delivery(format('auto'))
      .delivery(quality('auto'));
  }
}
```

cld-image.component.html

```angular
<advanced-image
  [cldImg]="myImage"
  [plugins]="plugins"
  [style]="{
    'max-width': '100%',
  }"
  class="my-cld-image"
></advanced-image>
```

> **See the full code**:
>
> * [Explore the Photo Album app on GitHub](https://github.com/cloudinary-devs/angular-photo-album).

## Image and video transformations

See all the [image](angular_image_transformations) and [video](angular_video_transformations) transformations that are shown in the Angular SDK guide.

This is the image and video transformations app in action:

Here's an excerpt from the code showing an image being [cropped](angular_image_transformations#resizing_and_cropping) to 200 x 300 pixels, automatically focusing on the most interesting part of the image.

autoGravity.component.ts

```angular

import { Component, OnInit } from '@angular/core';

// Import the Cloudinary classes.
import {Cloudinary, CloudinaryImage} from '@cloudinary/url-gen';
import {fill} from "@cloudinary/url-gen/actions/resize";
import {autoGravity} from "@cloudinary/url-gen/qualifiers/gravity";

@Component({
  selector: 'auto-gravity-image',
  templateUrl: './example.component.html',
  styleUrls: ['./app.component.css']
})
export class AutoGravityComponent implements OnInit{
  img!: CloudinaryImage;

  title = 'Crop an image to keep the most interesting part, as shown in '
  link = 'https://cloudinary.com/documentation/angular_image_transformations#resizing_and_cropping'
  heading = 'Resizing and cropping'

  ngOnInit() {

    // Create a Cloudinary instance and set your cloud name.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    });

    // Instantiate a CloudinaryImage object for the image with the public ID, 'basketball_in_net'.
    this.img = cld.image('basketball_in_net');
    this.img.resize(fill().width(200).height(300).gravity(autoGravity()));

  }
}
```

> **See the full code**:
>
> * [Explore the image and video transformations app on GitHub](https://github.com/cloudinary-devs/cld-angular-sdk-docs-examples).

> * [Open the code explorer](https://stackblitz.com/edit/github-dv8cnn?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fquickstart.component.ts&initialpath=/images).

## Angular plugins

The Cloudinary Angular library provides plugins to render the media on your site in the optimal way and improve your user's experience.  This app demonstrates how to implement:

* [Image accessibility](angular_image_transformations#image_accessibility) to make your images more accessible to your users with visual disabilities.
* [Responsive images](angular_image_transformations#responsive_images) to resize your images automatically based on the viewport size.
* [Lazy loading](angular_image_transformations#lazy_loading) to delay loading images if they are not yet visible on the screen.
* [Image placeholders](angular_image_transformations#image_placeholders) to display a lightweight version of an image while the target image is downloading.

This is the Angular plugins app in action: 

Here's an excerpt from the code showing images being rendered with the different plugins.

app.component.html

```angular

<div>
  <h2>Render a Cloudinary image</h2>
  <advanced-image [cldImg]="cloudinaryImage"></advanced-image>
  <div style="height: 20px;"></div>
  <h2>Cloudinary image with default accessibility</h2>
  <advanced-image
    [cldImg]="cloudinaryImage"
    [plugins]="accessibility"
  ></advanced-image>
  <div style="height: 20px;"></div>
  <h2>Cloudinary image with colorblind accessibility</h2>
  <advanced-image [cldImg]="cloudinaryImage" [plugins]="colorBlind">
  </advanced-image>
  <h2>Cloudinary image with responsive</h2>
  <div>Resize window to see changes (100 is the step size in px)</div>
  <advanced-image [cldImg]="cloudinaryImage" [plugins]="responsive">
  </advanced-image>
  <h2>Scroll down to see images lazyload</h2>
  <div style="height: 700px;">
    You can open your network tab to see the images loading
  </div>
  <advanced-image [cldImg]="brownSheep" [plugins]="lazyload"> </advanced-image>
  <div style="height: 400px;"></div>
  <advanced-image [cldImg]="woman" [plugins]="lazyload"> </advanced-image>
  <div style="height: 400px;"></div>
  <advanced-image [cldImg]="cat" [plugins]="lazyload"> </advanced-image>
  <div style="height: 50px;"></div>
  <div style="height: 700px;">
    Scroll down for lazyloading a large image with a placeholder
  </div>
  <advanced-image [cldImg]="largeImage" [plugins]="lazyloadWithPlaceholder">
  </advanced-image>
</div>

```

> **See the full code**:
>
> * [Explore the Angular plugins app on GitHub](https://github.com/cloudinary-devs/cld-angular-plugins).

> * [Open the code explorer](https://stackblitz.com/edit/github-gtvuuu?file=src%2Fapp%2Fapp.component.ts).

## Cloudinary Video Player

This app shows an example of a basic Angular component for the Cloudinary Video Player. It includes the ability to define a public ID and optional config for both player and source.

Here's an excerpt showing the component itself:

```angular
import {
  Component,
  Input,
  AfterViewInit,
  ElementRef,
  ViewChild,
} from '@angular/core';
import cloudinary from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

@Component({
  selector: 'cld-video-player',
  standalone: true,
  template: `
    <video
      #playerRef
      [id]="id"
      class="cld-video-player cld-fluid"
    ></video>
  `,
})
export class VideoPlayerComponent implements AfterViewInit {
  @Input() id: string = '';
  @Input() publicId: string = '';
  @Input() playerConfig: any = {};
  @Input() sourceConfig: any = {};

  @ViewChild('playerRef') playerRef!: ElementRef;

  private player: any;

  ngAfterViewInit() {
    this.initializePlayer();
  }

  private initializePlayer() {
    this.player = cloudinary.videoPlayer(this.playerRef.nativeElement, {
      cloud_name: 'demo',
      secure: true,
      controls: true,
      ...this.playerConfig,
    });
    this.player.source({ publicId: this.publicId, ...this.sourceConfig });
  }
}

```

And here's an example of the code to add that component with some configuration:

```react
<cld-video-player 
  id="video"
  publicId="glide-over-coastal-beach"
  [playerConfig]='{"muted": "true"}'
  [sourceConfig]='{"info": {"title": "Glide Over Coastal Beach"}, "transformation": {"effect": "blur"}}'
></cld-video-player>
```

> **See the full code**:
>
> * [Explore the Video Player Angular app on GitHub](https://github.com/cloudinary-devs/cloudinary-video-player-angular).

> * [Open the code explorer](https://stackblitz.com/edit/stackblitz-starters-jmszt2?file=src%2Fvideo-player.component.ts).