AngularLynx

    <text>

    Displays text, like a <span> or <p>. Every piece of visible text must be inside one.

    element-textsrc/app/app.ts

    Usage

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

@Component({
  selector: 'app-headline',
  imports: [LYNX_ELEMENTS],
  template: `
    <text text-maxline="2" style="text-overflow: ellipsis;">
      Regular text with <text style="font-weight: bold;">bold</text> words
    </text>
  `,
})
export class Headline {}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Text directly inside a <view> doesn't render, and nothing warns you. Wrap it in <text>.

    Attributes

    AttributeTypeDefaultDescription
    text-maxlinenumber—Maximum number of lines. Pair it with text-overflow: ellipsis: without it, iOS cuts the text off with no "…", and Android draws the extra lines over what follows.
    text-selectionbooleanfalseLets the user select and copy the text. On Android, also set flatten="false".
    custom-context-menubooleanfalseiOS and Android. Shows your own menu, instead of the system one, after the user selects text. Needs text-selection.
    custom-text-selectionbooleanfalseiOS and Android. Turns off the built-in selection gestures, so you drive selection with the methods below. Needs text-selection.
    text-single-line-vertical-align'normal' | 'top' | 'center' | 'bottom''normal'iOS and Android. Vertical alignment of single-line text, for fonts that don't center well. It slows text measurement.
    tail-color-convertbooleanfalseColors the truncation "…" like the outer <text>, not the last nested one.
    text-fake-boldbooleanfalseiOS and Android. Draws a synthetic bold when the font has no bold face.
    include-font-paddingbooleanfalseAndroid only. Adds font padding above and below the text, for scripts that would otherwise be clipped.
    android-emoji-compatbooleanfalseAndroid only. Draws emoji with the Emoji2 library, which the host app must include.

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

    Events

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

    EventdetailDescription
    bindlayout{ lineCount: number; lines: { start: number; end: number; ellipsisCount: number }[]; size: { width: number; height: number } }The text finished layout. A line with ellipsisCount above 0 was truncated.
    bindselectionchange{ start: number; end: number; direction: 'forward' | 'backward' }iOS and Android. The selected range changed.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) work on iOS and Android. Call them with invoke() on the element (see Call element methods). A call from a handler returns nothing: to read a result, call invoke() in a main-thread script instead.

    MethodParametersDescription
    setTextSelection{ startX: number; startY: number; endX: number; endY: number; showStartHandle?: boolean; showEndHandle?: boolean }Selects the text between two points, relative to the element. Returns the selection's boundingRect, boxes and handles.
    getTextBoundingRect{ start: number; end: number }Returns { boundingRect, boxes } for a range of characters.
    getSelectedText—Returns { selectedText }.
    import { Component } from '@angular/core';
import {
  LYNX_ELEMENTS,
  LynxMainThreadEvent,
  mainThreadFn,
  type MainThread,
} from '@blotch/angular-lynx';

// In a main-thread script, invoke() returns the method's result as a Promise.
const logSelection = mainThreadFn((event: MainThread.TouchEvent) => {
  event.currentTarget
    .invoke('getSelectedText')
    .then((res: { selectedText: string }) => console.log(res.selectedText));
});

@Component({
  selector: 'app-quote',
  imports: [LYNX_ELEMENTS, LynxMainThreadEvent],
  template: `
    <text
      text-selection="true"
      flatten="false"
      [mainThreadBindtap]="logSelection"
    >
      Select some of this text, then tap it.
    </text>
  `,
})
export class Quote {
  readonly logSelection = logSelection;
}

    Children

    A <text> can hold:

    • Text, including Angular interpolation such as {{ name() }}.
    • Nested <text>, to style part of the text. It inherits color and font-family from its parent <text>, even though CSS inheritance is otherwise off.
    • <image>, laid out inline with the text.
    • <view>, laid out inline like an inline block.
    • <inline-truncation>, as a direct child. Its content replaces the "…" when text-maxline truncates the text, and shows only then.