Ninjas Practicing Multidimensionality

    @cloudinary/ng
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.1 • Public • Published

    Cloudinary Angular SDK

    About

    The Cloudinary Angular SDK allows you to quickly and easily integrate your application with Cloudinary. Effortlessly optimize and transform your cloud's assets.

    Note

    This Readme provides basic installation and usage information. For the complete documentation, see the Angular SDK Reference.

    Table of Contents

    Key Features

    Version Support

    SDK Version ng 10.0 ng 11.0
    1.0.0 & up V V

    Installation

    Install using your favorite package manager (yarn, npm)

    npm i @cloudinary/url-gen @cloudinary/ng --save
    

    Or

    yarn add @cloudinary/url-gen @cloudinary/angular --save

    Usage

    Setup

    // In your app.module.ts:
    
    // Import the CloudinaryModule.
    import {CloudinaryModule} from '@cloudinary/ng';
    
    imports: [
      ...,
      CloudinaryModule
    ],

    Transform and Optimize Assets

    import {CloudinaryImage} from '@cloudinary/url-gen/assets/CloudinaryImage';
    
    export class AppComponent implements OnInit{
      img: CloudinaryImage;
    
      ngOnInit() {
         const myCld = new Cloudinary({ cloudName: 'demo'});
         this.img = myCld().image('sample');
      }
    }

    In your view add the component with your transformation

    <advanced-image [cldImg]="this.img"></advanced-image>

    Generate Image and Video HTML Tags

    - Use <advanced-image> to generate image tags
    - Use <advanced-video> to generate video tags
    

    Advanced Plugin Features

    import { CloudinaryImage } from "@cloudinary/url-gen";
    import {
      lazyload,
      responsive,
      accessibility,
      placeholder
    } from "@cloudinary/ng";
    
    export class AppComponent {
      cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });
      plugins = [lazyload(),responsive(), accessibility(), placeholder()];
    }
    <advanced-image [cldImg]="cloudinaryImage" [plugins]="plugins">

    You can omit any plugin, but the order from above should remain.

    File upload

    This SDK does not provide file upload functionality, however there are several methods of uploading from the client side.

    Contributions

    • Ensure tests run locally (npm run test)
    • Open a PR and ensure Travis tests pass

    Get Help

    If you run into an issue or have a question, you can either:

    About Cloudinary

    Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.

    Additional Resources

    License

    Released under the MIT license.

    Keywords

    none

    Install

    npm i @cloudinary/ng

    DownloadsWeekly Downloads

    989

    Version

    1.9.1

    License

    none

    Unpacked Size

    131 kB

    Total Files

    25

    Last publish

    Collaborators

    • cloudinary