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

# 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](https://app.autorender.io)
* An Angular project using standalone components

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/angular
      ```

      ```bash yarn theme={null}
      yarn add @autorender/angular
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/angular
      ```

      ```bash bun theme={null}
      bun add @autorender/angular
      ```
    </CodeGroup>
  </Step>

  <Step title="Set up the service.">
    Provide `AutoRenderService` and its config at your root component:

    ```typescript app.component.ts {13} theme={null}
    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 {}
    ```
  </Step>

  <Step title="Render your first image.">
    ```typescript product.component.ts {8} theme={null}
    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.
  </Step>
</Steps>

## Examples

### Complete transform example

```typescript hero.component.ts theme={null}
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

```typescript product-video.component.ts theme={null}
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.

```typescript upload.component.ts {15} theme={null}
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

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter you can pass to `transformations`.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the widget.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Resize, trim, and thumbnail video for `<ar-video>`.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Front-end and backend SDKs for every stack.
  </Card>
</CardGroup>