Content

Fetching in a route resolver

An Analog page fetches its content in the routeMeta resolver, through LocalessContentService. Because the resolver runs during server rendering, the result is written to TransferState and the browser reads it back instead of requesting it again. With withComponentInputBinding() in provideFileRouter(), the resolved value arrives as the page's input():

// src/app/pages/[...slug].page.ts
const contentResolver: ResolveFn<Content | undefined> = async (_route, state) => {
  const slug = state.url.split('?')[0].split('/').filter(Boolean).join('/') || 'home';
  return inject(LocalessContentService).contentBySlug(slug);
};

export const routeMeta: RouteMeta = {
  resolve: { content: contentResolver },
};

export default class SlugPage {
  readonly content = input<Content<Page>>();
}

See the Full Example for the complete route, including returning undefined on a 404 (LocalessApiError with status === 404) so the page can render a not-found state. For every fetching method and its options, see Content Service.

Locale-prefixed routes

Pass the locale to contentBySlug(slug, { locale }). The playground treats the first path segment as the locale when it matches one of the space's locales, and the rest as the slug — see resolveLocaleAndSlug in playgrounds/analog/src/app/shared/utils/route.ts.

Rendering content

• <ll-document [document]="content"> renders a full content response by its _schema and keeps it in sync with the Visual Editor.
• [llComponent] renders a nested block, such as each item of a list field — pass links(), references() and assets() through so nested components can resolve them.

Both use the registry from withLocalessComponents(). See Dynamic Component Rendering for their inputs.