AngularLynx

    <input>

    A single-line text field, like <input type="text">. For several lines, use <textarea>.

    element-inputsrc/app/app.ts

    Usage

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

@Component({
  selector: 'app-search',
  imports: [LYNX_ELEMENTS],
  template: `
    <input
      placeholder="Search"
      confirm-type="search"
      (bindinput)="onInput($event)"
      (bindconfirm)="search()"
    />
  `,
})
export class Search {
  readonly query = signal('');

  onInput(event: Event): void {
    this.query.set((event as CustomEvent<{ value: string }>).detail.value);
  }

  search(): void {}
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    type'text' | 'number' | 'digit' | 'password' | 'tel' | 'email''text'What can be typed, and which on-screen keyboard opens.
    placeholderstring—Hint shown while the field is empty.
    valuestring—Sets the text from code, for example to clear the field. Bind it as [value]: AngularLynx sends it through setValue, because Lynx ignores a value attribute once the user has typed. [attr.value] skips that and doesn't work.
    default-valuestring—iOS and Android. Text on the first render only. It doesn't fire bindinput.
    maxlengthnumberNo limitMaximum number of characters.
    confirm-type'send' | 'search' | 'go' | 'done' | 'next''send'Label of the keyboard's return key. Pressing it fires bindconfirm.
    readonlybooleanfalseThe text can't be edited. How focus behaves differs between platforms.
    disabledbooleanfalseThe field is fully inert: no focus and no keyboard.
    input-filterstring—A regular expression each typed character must match, e.g. '[0-9]'.
    show-soft-input-on-focusbooleantrueiOS and Android. Opens the on-screen keyboard when the field gets focus.
    ios-auto-correctbooleantrueiOS only. Autocorrect.
    ios-spell-checkbooleantrueiOS only. Spell checking.
    android-fullscreen-modebooleantrueAndroid only. In landscape, the keyboard and the field fill the screen.
    stylestringheight: 40px; border: 1px solid (set by AngularLynx)Native fields have no height or border of their own, so AngularLynx sets these inline. Override them in style.

    Plus the common attributes, such as id and class.

    Events

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

    EventdetailDescription
    bindinput{ value: string; selectionStart: number; selectionEnd: number; isComposing?: boolean }The text changed. isComposing is true while a keyboard that builds characters from several keystrokes, such as a Chinese or Japanese one, is mid-character.
    bindfocus{ value: string }The field got focus.
    bindblur{ value: string }The field lost focus.
    bindconfirm{ value: string }The user pressed the keyboard's return key.
    bindselection{ selectionStart: number; selectionEnd: number }The cursor or the selection moved.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) control the field from code. 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
    focus—Focuses the field and opens the keyboard.
    blur—Removes focus and closes the keyboard.
    getValue—Returns { value, selectionStart, selectionEnd, isComposing }.
    setValue{ value: string }Replaces the text. A [value] binding calls this for you.
    setSelectionRange{ selectionStart: number; selectionEnd: number }Selects a range of characters. Equal values place the cursor.
    import { Component, ElementRef, viewChild } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-search-box',
  imports: [LYNX_ELEMENTS],
  template: `
    <input #search placeholder="Search" />
    <view (bindtap)="startSearch()"><text>Search</text></view>
  `,
})
export class SearchBox {
  readonly search = viewChild.required('search', { read: ElementRef });

  startSearch(): void {
    this.search().nativeElement.invoke?.('focus');
  }
}
    • Forms: reactive forms, validation and the on-screen keyboard
    • <textarea>
    • Input: the styled UI component
    • Elements: the form value accessors for formControl and ngModel