Skip to content
Localive

Angular

Install

Section titled “Install”
Terminal window
npm install @localive/angular @localive/adapter-transloco @localive/plugin-angular @jsverse/transloco

Provide Localive in App Config

Section titled “Provide Localive in App Config”

provideLocalive takes an adapter factory (a function that returns the I18nAdapter) as its first argument and the locale options object as the second. The factory runs lazily inside Angular’s DI, so you inject(TranslocoService) inside it:

import { provideLocalive, LiveEditorOverlayComponent } from '@localive/angular';
import { withTransloco } from '@localive/adapter-transloco';
import { TranslocoService, TranslocoPipe } from '@jsverse/transloco';
import { inject, ApplicationConfig } from '@angular/core';


export const appConfig: ApplicationConfig = {
  providers: [
    provideLocalive(
      () => withTransloco(inject(TranslocoService), TranslocoPipe),
      { locales: ['en', 'fr', 'de'], defaultLocale: 'en' },
    ),
  ],
};

The Transloco adapter accepts the TranslocoService instance and the pipe/directive class (TranslocoPipe or your custom subclass). It uses them to resolve data-i18n-key from elements the Transloco directives touched.

Add the Overlay Component

Section titled “Add the Overlay Component”

The overlay selector is localive-overlay (not live-editor-overlay). Import LiveEditorOverlayComponent into your standalone root component or NgModule:

import { LiveEditorOverlayComponent } from '@localive/angular';
import { Component } from '@angular/core';


@Component({
  imports: [LiveEditorOverlayComponent],
  template: `
    <localive-overlay></localive-overlay>
    <router-outlet />
  `,
})
export class AppComponent {}

Tag Elements with data-i18n-key

Section titled “Tag Elements with data-i18n-key”

Bind the data-i18n-key attribute to the same key you pass to the Transloco pipe. When the inspector is active, clicking the element opens the editor panel for that key:

<span [attr.data-i18n-key]="'nav.home'">{{ 'nav.home' | transloco }}</span>
<span [attr.data-i18n-key]="'nav.about'">{{ 'nav.about' | transloco }}</span>

Toggle the Inspector

Section titled “Toggle the Inspector”

Inject LocaliveInspectorService and use activate() / deactivate() / isActive(). There is no setLocale() method on the service — switch locales through your Transloco service (translocoService.setActiveLang('fr')):

import { Component, inject, signal } from '@angular/core';
import { LocaliveInspectorService } from '@localive/angular';


@Component({ /* ... */ })
export class SomeComponent {
  private localive = inject(LocaliveInspectorService);
  readonly active = signal(false);


  toggle() {
    if (this.localive.isActive()) this.localive.deactivate();
    else this.localive.activate();
    this.active.set(this.localive.isActive());
  }
}

ngx-translate Adapter

Section titled “ngx-translate Adapter”

If you use ngx-translate instead of Transloco:

Terminal window
npm install @localive/adapter-ngx-translate @ngx-translate/core

The withNgxTranslate adapter takes the TranslateService and the TranslatePipe class as its second argument:

import { provideLocalive } from '@localive/angular';
import { withNgxTranslate } from '@localive/adapter-ngx-translate';
import { TranslateService, TranslatePipe } from '@ngx-translate/core';
import { inject, ApplicationConfig } from '@angular/core';


export const appConfig: ApplicationConfig = {
  providers: [
    provideLocalive(
      () => withNgxTranslate(inject(TranslateService), TranslatePipe),
      { locales: ['en', 'fr'], defaultLocale: 'en' },
    ),
  ],
};

Next Steps

Section titled “Next Steps”