Angular

Angular is a popular open-source framework written in TypeScript that is primarily used for building single-page web applications (SPAs).

Library

Localess provides an Angular Library @localess/angular that should help to integrate with API and Visual Editor.

Install

Bash

# NPM
npm install @localess/angular@latest
# YARN
yarn add @localess/angular@latest
# PNPM
pnpm add @localess/angular@latest

Client Provider

TypeScript

const LOCALESS_URL = 'https://my-localess.web.app';
const LOCALESS_SPACE = 'I1LoVe2LocaLess4Rever';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLocalessBrowser({
      origin: LOCALESS_URL,
      spaceId: LOCALESS_SPACE,
    }),
  ],
};

Client Base Component

Create LocalessComponenet and extend it in your components.

TypeScript

import {Component, inject} from "@angular/core";
import {ContentAsset, ContentLink, Links} from "@localess/js-client";
import {findLink, LOCALESS_BROWSER_CONFIG} from "@localess/angular/browser";

@Component({
  selector: 'llw-component',
  standalone: true,
  template: '',
  host: {
    '[attr.data-ll-id]': 'id()'
  },
})
export abstract class LocalessComponent {

  config = inject(LOCALESS_BROWSER_CONFIG)

  abstract id(): string;

  assetUrl(asset: ContentAsset): string {
    return this.config.assetPathPrefix + asset.uri;
  }

  findLink(links: Links, link: ContentLink): string {
    return findLink(links, link);
  }
}

Now you can extend LocalessComponent in your components.

Implement id() method to return the id of the component. It will help to identify the component in the Localess VisualEditor UI.

Now you have access to two utilities assetUrl and findLink to get the asset url and link url respectively.

TypeScript

@Component({
  selector: 'llw-schema-hero-section',
  standalone: true,
  templateUrl: 'hero-section.component.html',
  styleUrl: 'hero-section.component.scss',
  imports: []
})
export default class HeroSectionComponent extends LocalessComponent {

  data = input.required<HeroSection>();
  links = input.required<Links>();

  override id(): string {
    return this.data()._id;
  }
}

Server Usage

TypeScript

const LOCALESS_URL = 'https://my-localess.web.app';
const LOCALESS_SPACE = 'I1LoVe2LocaLess4Rever';
const LOCALESS_TOKEN = 'Baz00KaT0KeN8S3CureLL';

const serverConfig: ApplicationConfig = {
  providers: [
    provideLocalessServer({
      origin: LOCALESS_URL,
      spaceId: LOCALESS_SPACE,
      token: LOCALESS_TOKEN
    }),
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Listen for Events

Your application can subscribe to the Localess Visual Editor Events :

TypeScript

window.localess.on(['input', 'change'], (event) => {
  if (event.type === 'input' || event.type === 'change') {
    console.log(event.data);
    //Update your content data ...
  }
});