Angular

Angular is a TypeScript-based web framework developed by Google for building dynamic, single-page applications (SPAs). It provides tools for data binding, dependency injection, component-based architecture, and modular development.

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 Schema Component

Extend your component with the library SchemaComponenet components.

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

Now you have access to two utilities :

assetUrl - convert asset ID to a full asset URL.
findLink find selected link from all available links.

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 SchemaComponenet {

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

  override content(): ContentData {
    return this.data();
  }

  // access assetUrl and findLink functions
}

Directives

You can use one of the next directive [data-ll-id] with [data-ll-schema] or [llContent] in case you don't extend SchemaComponent or your component has a sub-schema, and you still wish to keep the Visual Editor selection feature.

Pipes

Asset

Pipe llAsset, the same feature as SchemaComponent.assetUrl() function, on in pipe.

Link

Pipe llLink, the same feature as SchemaComponent.findLink() function, on in pipe.

RichText to HTML

Pipe llRtToHtml, used to transform RichText Schema into HTML.

Safe HTML

Pipe llSafeHtml, used to sanitize HTML from XSS security risks.

Server Side Provider

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);

How to Enable Visual Editor Feature

You can extend VisualEditorComponent in your main/app components. It will help to load all required scripts to enable Visual Editor sync.

TypeScript

import {Component, OnInit} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {BrowserVisualEditorService} from "@localess/angular/browser";

@Component({
  selector: 'll-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <router-outlet></router-outlet> `,
})
export class AppComponent implements OnInit {
  constructor(
    private readonly visualEditorService: BrowserVisualEditorService
  ) {
  }

  ngOnInit(): void {
    this.visualEditorService.init()
  }
}

Listen for Visual Editor Events

Your application can subscribe to the Localess Visual Editor Events :

TypeScript

@Component({
  selector: 'll-slug',
  standalone: true,
  templateUrl: 'slug.component.html',
  styleUrl: 'slug.component.scss',
})
export default class SlugComponent implements OnInit {
  platformId = inject(PLATFORM_ID)
  editorData = signal<any | undefined>(undefined);

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // check if you are in Framework Edit Mode
      const isDraftMode = true;
      if (isDraftMode && window.localess) {
        window.localess.on(['input', 'change'], (event) => {
          if (event.type === 'input' || event.type === 'change') {
            this.editorData.set(event.data);
          }
        });
      }
    }
  }
}