Reference

Asset Service

LocalessAssetService generates asset URLs. Its API is identical whether called server-side or in the browser.

import { LocalessAssetService } from '@localess/angular';

@Injectable()
export class MyService {
  private assetService = inject(LocalessAssetService);

  getUrl(asset: ContentAsset): string {
    return this.assetService.link(asset);
    // or: this.assetService.link('path/to/asset.jpg')
  }
}

SchemaComponent.assetUrl() and the llAsset pipe use the same underlying logic (LocalessClientService.assetLink()) — all three are equivalent.

Requesting a transformed asset (resize / format conversion)

Pass an AssetTransformParams object as the second argument to request a resized image or a different output format:

assetService.link(asset, { w: 400, f: 'webp' });
assetService.link(asset, { w: 800, h: 600, q: 70, f: 'avif' });

Translation Service

LocalessTranslationService fetches translation strings for a given locale.

import { LocalessTranslationService } from '@localess/angular';

@Injectable()
export class MyService {
  private translationService = inject(LocalessTranslationService);

  async getTranslations(locale: string) {
    return this.translationService.fetch(locale);
  }
}

The returned Translations object is a flat key–value map (Record<string, string>).

Directives

Use these when you have a component or element that is not rendered through [llComponent]/<ll-document> but should still be selectable in the Visual Editor.

[data-ll-id] and [data-ll-schema]

Marker directives. Apply both together to any element to make it recognizable in the Visual Editor:

<div [attr.data-ll-id]="item._id" [attr.data-ll-schema]="item._schema">
  <!-- content -->
</div>

[data-ll-field]

Marks an individual field within a schema for field-level selection in the Visual Editor:

<p data-ll-field="subtitle">{{ data.subtitle }}</p>

[llContent]

A convenience directive that sets both data-ll-id and data-ll-schema on the host element from a single ContentDataSchema input binding. Useful for sub-schemas rendered without going through the component registry:

import { ContentDirective } from '@localess/angular';

@Component({
  imports: [ContentDirective],
})
export class PageComponent {}

<div [llContent]="subSchema">
  <!-- sub-schema content -->
</div>

Pipes

Import individual pipes into the imports array of any standalone component that uses them.

llAsset — Asset URL

Transforms a ContentAsset object into a fully qualified CDN URL. Equivalent to assetUrl() on schema components.

import { AssetPipe } from '@localess/angular';

@Component({ imports: [AssetPipe] })

<img [src]="data.image | llAsset" alt="..." />
<img [src]="data.image | llAsset:{ w: 400, f: 'webp' }" alt="..." />

See Requesting a transformed asset above for the full AssetTransformParams field reference.

llLink — Link Resolution

Resolves a ContentLink from the links map to a navigable path or URL. Pass the links map as the piped value and the ContentLink as the argument:

import { LinkPipe } from '@localess/angular';

<a [href]="links | llLink: data.ctaLink">Visit</a>

llRichText — Rich Text

Converts a Localess RichText field (Tiptap JSON) to sanitizer-trusted SafeHtml, synchronously. Bind it straight to [innerHTML] — no | async and no | llSafeHtml in the chain:

import { LocalessRichTextPipe } from '@localess/angular';

@Component({ imports: [LocalessRichTextPipe] })

<div [innerHTML]="data.body | llRichText"></div>

The pipe accepts LocalessRichTextInput — a full document, a single node, an array of nodes, or null/undefined — so a field value passes through without casting, and an unfilled field renders nothing. Supports headings (H1–H6), bold, italic, strike, underline, code, bullet lists, ordered lists, code blocks, and links. Pass a renderer override map as the pipe argument (data.body | llRichText: myRenderers) to replace the output for one element.

The HTML is generated and escaped by @localess/richtext rather than taken from raw input, which is what makes the pipe's internal bypassSecurityTrustHtml safe.

<ll-rich-text> — Rich Text component

The component form of the same renderer, for when a host element is more convenient than a pipe binding:

import { LocalessRichText } from '@localess/angular';

@Component({ imports: [LocalessRichText] })

<ll-rich-text [content]="data.body" />

llSafeHtml — Safe HTML

Bypasses Angular's DomSanitizer for a trusted HTML string. Accepts string | null | undefined, with the latter two treated as empty HTML.

You don't need this for rich text — llRichText and <ll-rich-text> already return trusted SafeHtml. Reach for llSafeHtml only for HTML from some other trusted source in your space.

<div [innerHTML]="data.embedHtml | llSafeHtml"></div>

Security: llSafeHtml calls DomSanitizer.bypassSecurityTrustHtml(). Only use it with HTML that comes directly from your trusted Localess space.

Angular Image Optimization

provideLocaless() automatically registers Angular's IMAGE_LOADER provider. When you use NgOptimizedImage (ngSrc) with a Localess asset URL, Angular appends ?w=<requested-width> to the URL for server-side image resizing:

<img
  ngSrc="{{ data.image | llAsset }}"
  width="800"
  height="600"
  alt="Hero image"
/>
<!-- Rendered src: https://my-localess.web.app/api/v1/spaces/.../assets/image.jpg?w=800 -->

No additional configuration is required.

API Reference

@localess/angular

Also re-exports all types from @localess/client: