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