Angular

Render optimized, responsive images and video in Angular with standalone components and an injectable service, plus a browser upload widget.

The @autorender/angular SDK provides standalone components — <ar-image> and <ar-video> — that render optimized media from an Autorender delivery URL, an injectable AutoRenderService for workspace config, and an uploader for browser uploads.

Prerequisites

• An Autorender account with a workspace ID — create one in the dashboard
• An Angular project using standalone components

Guide

1. Install the package.

   npm

   npm install @autorender/angular
   

   yarn add @autorender/angular
   

   pnpm add @autorender/angular
   

   bun add @autorender/angular
   
2. Set up the service.

   Provide AutoRenderService and its config at your root component:

   app.component.ts

   import { Component } from '@angular/core';
   import { AutoRenderService, AUTORENDER_CONFIG } from '@autorender/angular/viewtag';
   import type { CreateARConfig } from '@autorender/js/viewtag';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     providers: [
       AutoRenderService,
       {
         provide: AUTORENDER_CONFIG,
         useValue: {
           baseUrl: 'https://assets.autorender.io',
           workspace: 'LOKVTtKVGb',
         } as CreateARConfig
       }
     ]
   })
   export class AppComponent {}
   

3. Render your first image.

   product.component.ts

   import { Component } from '@angular/core';
   import { ARImageComponent } from '@autorender/angular/viewtag';
   
   @Component({
     selector: 'app-product',
     standalone: true,
     imports: [ARImageComponent],
     template: `
       <ar-image
         src="products/chair.jpg"
         [width]="400"
         [height]="400"
         alt="Chair"
         [transformations]="{ fit: 'cover' }"
         [responsive]="true"
         [lazy]="true"
       />
     `
   })
   export class ProductComponent {}
   

   This renders an <img> resized to 400×400 px, cropped to fill, with a responsive srcset and lazy loading.

Examples

Complete transform example

hero.component.ts

import { Component } from '@angular/core';
import { ARImageComponent } from '@autorender/angular/viewtag';
import type { TransformOptions } from '@autorender/js';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [ARImageComponent],
  template: `
    <ar-image
      src="hero.jpg"
      [width]="1200"
      [height]="800"
      alt="Hero image"
      [transformations]="transform"
      [responsive]="true"
      [lazy]="true"
      sizes="(min-width: 1200px) 1200px, 100vw"
      class="hero-image"
    />
  `
})
export class HeroComponent {
  transform: TransformOptions = {
    w: 1200,
    h: 800,
    fit: 'cover',
    ar: '16:9',
    position: 'center',
    improve: true,
    sharpen: 50,
    layers: [
      {
        type: 'image',
        imagePath: 'logo.png',
        width: 200,
        placement: 'north-east',
      }
    ],
    blend: 'overlay',
  };
}

Video component

product-video.component.ts

import { Component } from '@angular/core';
import { ARVideoComponent } from '@autorender/angular/viewtag';

@Component({
  selector: 'app-product-video',
  standalone: true,
  imports: [ARVideoComponent],
  template: `
    <ar-video
      src="docs/skateboarding.mp4"
      [width]="960"
      [height]="540"
      [controls]="true"
      preload="metadata"
      [transformations]="{ w: 960, h: 540 }"
    />
  `
})
export class ProductVideoComponent {}

Upload widget

The uploader runs in the browser, so read the API key from your Angular environment rather than hardcoding it.

upload.component.ts

import { Component, ElementRef, OnInit } from '@angular/core';
import { bootstrapAutorenderUploader } from '@autorender/angular';
import '@autorender/angular/styles';

@Component({
  selector: 'app-upload',
  template: '<div class="uploader"></div>',
  standalone: true,
})
export class UploadComponent implements OnInit {
  constructor(private host: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    const target = this.host.nativeElement.querySelector('.uploader');
    if (!target) return;

    bootstrapAutorenderUploader(target, {
      apiKey: environment.autorenderKey,
      type: 'inline',
      allowMultiple: true,
      onSuccess: ({ files }) => console.log('Uploaded', files),
    });
  }
}

API reference

bootstrapAutorenderUploader(target, options)

Mounts the uploader widget into a DOM element. Returns a UploaderInstance.

Params:

• target: HTMLElement — container element to mount into
• options: CreateUploaderOptions — uploader configuration (same as the JavaScript SDK)

AUTORENDER_CONFIG

Angular InjectionToken<CreateARConfig>. Provide at root component level to configure the AR instance workspace and base URL.

AutoRenderService

Injectable service. Call initialize(config) once at app root, then getInstance() anywhere to access the ARInstance.

<ar-image> (ARImageComponent)

Inputs:

• src: string — image source path (required)
• [width]?: number — image width in pixels
• [height]?: number — image height in pixels
• [transformations]?: TransformOptions — transformation options
• [responsive]?: boolean — responsive images (default true)
• [lazy]?: boolean — lazy loading (default true)
• sizes?: string — sizes attribute for responsive images
• alt?: string — alt text
• [ngClass]?: any — Angular class binding
• [ngStyle]?: any — Angular style binding

<ar-video> (ARVideoComponent)

Video.js-based player. Inputs: src, [width], [height], [controls], preload, [transformations].

Next steps

Image transformations

Every parameter you can pass to transformations.

Direct upload API

The upload endpoint behind the widget.

Video transformations

Resize, trim, and thumbnail video for <ar-video>.

All SDKs

Front-end and backend SDKs for every stack.