@texti/ngx-sdk

Angular integration for Texti SDK - Native Angular pipes, directives, and services for seamless translation management.

Compatible with Angular 15, 16, 17, 18, 19, and 20

Features

• ✅ Angular Pipe - {{ 'key' | texti }} for template translations
• ✅ Angular Directive - [texti]="'key'" for automatic translation updates
• ✅ Reactive Service - RxJS observables for language changes
• ✅ Standalone Components - Works with Angular standalone components
• ✅ Module Support - Traditional NgModule integration
• ✅ TypeScript - Full type safety
• ✅ Visual Editor - In-context editing support

Installation

Using npm

npm install @texti/ngx-sdk @texti/sdk

Using yarn

yarn add @texti/ngx-sdk @texti/sdk

Note: @texti/sdk is a peer dependency and must be installed separately.

Quick Start

1. Import the Module

import { NgModule } from '@angular/core';
import { TextiModule } from '@texti/ngx-sdk';

@NgModule({
  imports: [
    TextiModule.forRoot({
      apiUrl: 'https://texti.ee/api',
      projectId: 'your-project-id',
      apiKey: 'your-api-key',
      enableVisualEditor: true, // Enable click-to-edit
    }),
  ],
})
export class AppModule {}

2. Use in Templates

Using the Pipe

<h1>{{ 'home.welcome' | texti }}</h1>
<p>{{ 'home.description' | texti }}</p>
<p>{{ 'greet.user' | texti: {name: userName} }}</p>

Using the Directive

<h1 [texti]="'home.title'"></h1>
<p [texti]="'home.description'" [textiParams]="{name: userName}"></p>

3. Use in Components

import { Component } from '@angular/core';
import { TextiService } from '@texti/ngx-sdk';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'home.welcome' | texti }}</h1>
    <button (click)="switchLanguage('es')">Switch to Spanish</button>
  `,
})
export class AppComponent {
  constructor(public texti: TextiService) {}

  switchLanguage(lang: string) {
    this.texti.setLanguage(lang);
  }
}

Manual Initialization

If you're not using TextiModule.forRoot(), initialize manually:

import { Component, OnInit } from '@angular/core';
import { TextiService } from '@texti/ngx-sdk';

@Component({
  selector: 'app-root',
  template: `<h1>{{ 'home.welcome' | texti }}</h1>`,
})
export class AppComponent implements OnInit {
  constructor(private texti: TextiService) {}

  async ngOnInit() {
    await this.texti.initialize({
      apiUrl: 'https://texti.ee/api',
      projectId: 'your-project-id',
      apiKey: 'your-api-key',
    });
  }
}

API Reference

TextiService

Methods

• t(key: string, params?: Record<string, string>): string - Get translation
• setLanguage(languageCode: string): void - Change language
• getCurrentLanguage(): string - Get current language
• getLanguages(): Language[] - Get all languages
• canEdit(): boolean - Check if user can edit

Observables

• initialized$: Observable<boolean> - SDK initialization state
• currentLanguage$: Observable<string> - Current language changes
• languages$: Observable<Language[]> - Available languages

TextiPipe

{{ 'translation.key' | texti }}
{{ 'greet.user' | texti: {name: 'John'} }}

TextiDirective

<h1 [texti]="'home.title'"></h1>
<p [texti]="'home.description'" [textiParams]="{name: userName}"></p>

Configuration

interface TextiConfig {
  apiUrl: string;              // Texti API URL
  projectId: string;           // Your project ID
  apiKey: string;              // Your API key
  enableVisualEditor?: boolean; // Enable click-to-edit (default: true)
  debug?: boolean;             // Enable debug logging (default: false)
  syncInterval?: number;       // Auto-sync interval in ms
}

Language Switching

The pipe and directive automatically update when language changes:

// In your component
this.texti.setLanguage('es'); // All translations update automatically

Visual Editor

When enableVisualEditor is true and user has edit permissions, they can click on translated text to edit it directly in the browser.

License

MIT