AngularLynx

    <frame>

    Embeds another Lynx bundle (Glossary) inside your page, like an <iframe>. The embedded page runs as its own separate app. To show a website, use <webview> instead.

    Usage

    src/app/widget-host.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-widget-host',
  imports: [LYNX_ELEMENTS],
  template: `
    <frame
      src="https://example.com/widget.lynx.bundle"
      [data]="{ userId: userId() }"
      style="width: 100%; height: 200px;"
      (bindload)="loaded.set(true)"
    ></frame>
  `,
})
export class WidgetHost {
  readonly userId = signal('42');
  readonly loaded = signal(false);
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Attributes

    AttributeTypeDefaultDescription
    srcstring—URL of the bundle to embed.
    dataRecord<string, unknown>—Data passed to the embedded page.
    global-propsRecord<string, unknown>—Global properties for the embedded page, which it reads from lynx.__globalProps.
    auto-heightbooleanfalseThe frame takes the height of the embedded page's content.
    auto-widthbooleanfalseiOS and Android. The frame takes the width of the embedded page's content.
    preset-heightstring—iOS and Android. Height to use until the embedded page reports its size, e.g. '200px'.
    preset-widthstring—iOS and Android. Width to use until the embedded page reports its size.
    enable-multi-async-threadbooleanThe host app's settingiOS and Android. Overrides the host app's threading setting for the embedded page.

    Plus the common attributes, such as id, class and style.

    Events

    Read the payload from $event.detail (see Handling taps and events).

    EventdetailDescription
    bindload{ url: string; statusCode: number; statusMessage: string }The embedded bundle finished loading. statusCode and statusMessage say how it went.
    bindloadmetrics{ url: string; mode: string; entry: object }iOS and Android, Lynx 3.9 and later. Load timings reported by the embedded page.

    Plus the common events, such as bindtap.