AngularLynx

    <textarea>

    A multi-line text field, like a <textarea>. For a single line, use <input>.

    element-textareasrc/app/app.ts

    Usage

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

@Component({
  selector: 'app-message',
  imports: [LYNX_ELEMENTS],
  template: `
    <textarea
      placeholder="Write a message"
      maxlines="6"
      (bindinput)="onInput($event)"
    ></textarea>
  `,
})
export class Message {
  readonly text = signal('');

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

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    type'text' | 'number' | 'digit' | 'tel' | 'email''text'What can be typed, and which on-screen keyboard opens.
    placeholderstring—Hint shown while the field is empty. On iOS it stays visible over text set from code, so drop it while there's a value: [attr.placeholder]="text() ? null : 'Message'".
    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.
    maxlinesnumber—iOS and Android. Maximum number of lines.
    line-spacingnumber | string—iOS and Android. Extra space between lines, e.g. 4 or '4px'.
    confirm-type'send' | 'search' | 'go' | 'done' | 'next''done'Label of the keyboard's return key. bindconfirm fires only when you set it.
    readonlybooleanfalseThe text can't be edited.
    disabledbooleanfalseThe field is fully inert: no focus and no keyboard.
    input-filterstring—A regular expression each typed character must match.
    show-soft-input-on-focusbooleantrueiOS and Android. Opens the on-screen keyboard when the field gets focus.
    bouncesbooleantrueiOS only. Bounce when its content scrolls past the edges.
    enable-scroll-barbooleanfalseiOS and Android. Shows the scroll bar.
    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: 80px; 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 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. Fires only when confirm-type is set.
    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-note',
  imports: [LYNX_ELEMENTS],
  template: `
    <textarea #note placeholder="Note"></textarea>
    <view (bindtap)="done()"><text>Done</text></view>
  `,
})
export class Note {
  readonly note = viewChild.required('note', { read: ElementRef });

  done(): void {
    // Closes the on-screen keyboard.
    this.note().nativeElement.invoke?.('blur');
  }
}
    • Forms: reactive forms, validation and the on-screen keyboard
    • <input>
    • Textarea: the styled UI component