@stringpush/angular

Angular 17+ bindings for @stringpush/sdk.

Install

pnpm add @stringpush/angular @stringpush/sdk @angular/core

Usage

import { bootstrapApplication } from "@angular/platform-browser";
import { provideTranslation } from "@stringpush/angular";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideTranslation({
      applicationId: "<from admin>",
      environment: "staging",
      locale: "en",
      apiKey: "trt_…",
      apiBaseUrl: "https://api.platform.stringpush.com",
      origin: window.location.origin,
    }),
  ],
});

Service

import { Component, inject } from "@angular/core";
import { TranslationService } from "@stringpush/angular";

@Component({
  selector: "app-greeting",
  standalone: true,
  template: `
    @if (translation.isReady()) {
      <h1>{{ translation.t("common.greeting") }}</h1>
    }
  `,
})
export class GreetingComponent {
  readonly translation = inject(TranslationService);
}

Pipe

import { Component } from "@angular/core";
import { TranslatePipe } from "@stringpush/angular";

@Component({
  selector: "app-welcome",
  standalone: true,
  imports: [TranslatePipe],
  template: `<p>{{ "common.welcome" | translate: { name: "Ada" } }}</p>`,
})
export class WelcomeComponent {}

provideTranslation registers an APP_INITIALIZER that loads the manifest and active locale bundle. TranslatePipe is pure: false so catalog updates re-render templates.

Overlay / edit mode

Pass editLauncher, editToken, and related init() fields into provideTranslation. Import overlay helpers from @stringpush/angular or @stringpush/sdk.

Related

• Angular integration guide
• Integration hub

Report vulnerabilities to [email protected].