#Host data

Read the data your native app passes in, as signals, and transform it before your app sees it. import { LynxInitData, LynxGlobalData, registerDataProcessors, type InitData, type GlobalData, type InitDataRaw, type DataProcessorDefinition } from '@blotch/angular-lynx';

The host app (the native iOS or Android app that runs your bundle) sends two kinds of data:

• InitData: data for this one page, passed when the host opens it.
• GlobalData: app-wide values, such as the theme or locale, shared by every page.

#Usage

// This export makes the file a module, so the block below adds to
// @blotch/angular-lynx's types instead of replacing them.
export {};

declare module '@blotch/angular-lynx' {
  interface InitData {
    userId: string;
  }
  interface GlobalData {
    theme: 'Light' | 'Dark';
  }
}

import { Component, computed, inject } from '@angular/core';
import { LYNX_ELEMENTS, LynxInitData } from '@blotch/angular-lynx';

@Component({
  selector: 'app-profile',
  imports: [LYNX_ELEMENTS],
  template: `<text>User {{ userId() }}</text>`,
})
export class Profile {
  readonly #initData = inject(LynxInitData);
  // initData() is {} when the host sends nothing, as in Lynx Explorer.
  readonly userId = computed(() => this.#initData.initData().userId ?? 'guest');
}

#API

#LynxInitData

@Injectable({ providedIn: 'root' })
class LynxInitData {}

The page's InitData as a signal.

#LynxInitData.initData

readonly initData: WritableSignal<InitData>;

Starts with the InitData the host passed when it opened the page, after your default data processor has run on it. It's {} when the host passes none, and outside Lynx. AngularLynx also keeps the value as lynx.__initData, as React Lynx does. When the host sends new data, it's merged into the current value. When the host resets the data, the new data replaces it.

#LynxGlobalData

@Injectable({ providedIn: 'root' })
class LynxGlobalData {}

The app-wide GlobalData as a signal. LynxTheme, LynxLocale and LynxSafeArea read their values from it.

#LynxGlobalData.globalData

readonly globalData: WritableSignal<GlobalData>;

Starts with the global values at launch, or {} when the host sets none. When the host changes them, the new values are merged into the current ones.

#registerDataProcessors()

function registerDataProcessors(definition: DataProcessorDefinition): void;

Registers functions that transform the host's InitData before your app receives it. Call it in main.ts before bootstrapApplication().

import {
  bootstrapApplication,
  registerDataProcessors,
} from '@blotch/angular-lynx';
import { App } from './app/app';
import { appConfig } from './app/app.config';

registerDataProcessors({
  defaultDataProcessor: (raw) => ({ ...raw, userId: String(raw['user_id']) }),
});

bootstrapApplication(App, appConfig);

• Default processor: used when the host sends data without naming a processor.
• Named processors: used when the host names one. An unknown name passes the data through unchanged.
• A processor that throws gives your app {} instead of crashing it.
• Calling it again replaces the earlier registration.

#Types

#InitDataRaw

interface InitDataRaw extends Record<string, unknown> {}

The InitData exactly as the host sends it. A processor's input. Augment it to type the raw fields.

#InitData

interface InitData extends Record<string, unknown> {}

The InitData your app reads, after processing. Augment it, as in Usage, to type initData().

Put every augmentation in a file that contains export {};. Without it, the declare module block replaces the package's types instead of adding to them.

#GlobalData

interface GlobalData extends Record<string, unknown> {}

The GlobalData your app reads. Augment it to type globalData().

#DataProcessorDefinition

type DataProcessorDefinition = {
  defaultDataProcessor?: (rawInitData: InitDataRaw) => InitData;
  dataProcessors?: Record<string, (...args: any[]) => any>;
};

#Related

• Pass data from your native app: how the host sends data, step by step.
• Embed in an existing native app
• Theme, Locale and Safe area: built on LynxGlobalData.