AngularLynx

    <webview>

    Shows a website or an HTML string inside your app, like an <iframe>. Use it for help pages, terms of service or sign-in pages. To embed another Lynx bundle, use <frame>.

    element-webviewsrc/app/app.ts

    Usage

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

@Component({
  selector: 'app-help',
  imports: [LYNX_ELEMENTS],
  template: `
    @if (loading()) {
      <text>Loading…</text>
    }
    <webview
      src="https://angular.dev"
      style="width: 100%; height: 400px;"
      (bindload)="loading.set(false)"
    ></webview>
  `,
})
export class Help {
  readonly loading = signal(true);
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    Clay is a separate Lynx renderer used by Lynx's desktop apps. AngularLynx's iOS, Android and web builds don't use it, so you can ignore the Clay-only rows.

    AttributeTypeDefaultDescription
    srcstring—URL to load. Changing it reloads the page. In the web preview, most sites show a broken page while bindload still fires: check URLs on a device, and use html in the browser.
    htmlstring—HTML to load. Ignored when src is set.
    bouncesbooleanfalseiOS only. Bounce at the edges.
    scroll-bar-enablebooleanfalseiOS only. Shows the scroll bar.
    enable-debugbooleanfalseLets you inspect the page with Chrome DevTools (Android) or Safari Web Inspector (iOS).
    webview-typestring'default'iOS and Android. Picks a custom web view that the host app provides.
    paramsobject—iOS and Android. Options for that custom web view.
    initjsstring—Desktop (Clay) only. Script to run when the document is ready.
    cookiesobject[]—Clay only. Cookies to set before loading, each { name, value, domain?, path?, secure?, httpOnly?, sameSite }.
    use-osrbooleanfalseClay only. Renders the page off screen.

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

    Events

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

    EventdetailDescription
    bindload—The page finished loading.
    binderror{ errorCode: number; errorMsg: string }The page failed to load.
    bindmessage{ msg: string }The page sent a message to your app.
    bindopenwindow{ url: string }Clay only. The page tried to open a window.
    bindlocationchange{ url: string }Clay only. The page navigated to url.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) control the page. Call them with invoke() on the element (see Call element methods).

    MethodParametersDescription
    reload—Reloads the page.
    eval{ func: string }Calls a JavaScript function in the page, e.g. 'greet("Ada")'.
    cookies.get, cookies.set, cookies.remove, cookies.flushStoreVariesClay only. Read and change the web view's cookies.
    import { Component, ElementRef, viewChild } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-help-page',
  imports: [LYNX_ELEMENTS],
  template: `
    <webview
      #help
      src="https://angular.dev"
      style="width: 100%; height: 400px;"
    ></webview>
    <view (bindtap)="reload()"><text>Reload</text></view>
  `,
})
export class HelpPage {
  readonly help = viewChild.required('help', { read: ElementRef });

  reload(): void {
    this.help().nativeElement.invoke?.('reload');
  }
}