Web Components

shield-text-input

Text-Eingabefeld mit Label, Placeholder und Value-Event fuer Form-Flows.

Custom Stories

Freie Doku-Demos fuer Binding, Autofokus und imperative Methoden.

HTMLAngular

Text Input Basis (HTML)

Klassischer Einsatz mit Label und Placeholder.

Code

<shield-text-input label="E-Mail" placeholder="name@firma.de" value=""></shield-text-input>

Text Input Binding (Angular Island)

Control + valueChange Event in Angular.

Aktueller Angular-State: Hallo aus Angular in Astro

Code

import { Component } from '@angular/core';
import { ShieldTextInput } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldTextInput],
  template: `
    <shield-text-input label="Angular in Astro (Two-Way Binding)" placeholder="Schreib was..." [value]="value" (valueChange)="onValueChange($event)"></shield-text-input>
  `
})
export class AngularTextInputDemoComponent {
  value = 'Hallo aus Angular in Astro';

  onValueChange(event: CustomEvent<string>) {
    this.value = event.detail ?? '';
  }
}

HTMLAngular

Autofocus bei Initial-View (HTML)

Zweites Feld wird initial fokussiert.

Code

<shield-text-input label="Name" placeholder="Max Mustermann"></shield-text-input>
<shield-text-input label="Suche" placeholder="Direkt fokussiert" autofocus></shield-text-input>

Autofocus bei Initial-View (Angular Island)

Autofocus plus empfohlenes setFocus in ngAfterViewInit.

Code

import { Component, ElementRef, ViewChild } from '@angular/core';
import type { AfterViewInit } from '@angular/core';
import { ShieldTextInput } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldTextInput],
  template: `
    <shield-text-input label="Name" placeholder="Max Mustermann"></shield-text-input>
    <shield-text-input #autoField label="Suche" placeholder="Direkt fokussiert" [autofocus]="true"></shield-text-input>
  `
})
export class AngularTextInputAutofocusDemoComponent implements AfterViewInit {
  @ViewChild('autoField', { read: ElementRef }) autoField?: ElementRef<HTMLElement & {
    setFocus: () => Promise<void>;
  }>;

  ngAfterViewInit() {
    queueMicrotask(() => {
      void this.autoField?.nativeElement?.setFocus?.();
    });
  }
}

Hinweis: In Angular ist fuer verlassliches Initial-Fokusverhalten die Kombination aus autofocus und einem expliziten setFocus() nach dem Render empfohlen.

HTMLAngular

Imperative API (HTML)

Methoden setFocus, select und setBlur fuer gesteuerte Interaktion.

Code

<button type="button" onclick="document.getElementById('text-input-methods-demo')?.setFocus()">Focus</button>
<button type="button" onclick="document.getElementById('text-input-methods-demo')?.select()">Select</button>
<button type="button" onclick="document.getElementById('text-input-methods-demo')?.setBlur()">Blur</button>
<shield-text-input id="text-input-methods-demo" label="Ticket-ID" value="SHD-12345"></shield-text-input>

Imperative API (Angular Island)

Methoden via ElementRef aufrufen.

Aktueller Wert: SHD-12345

Code

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ShieldTextInput } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldTextInput],
  template: `
    <button type="button" (click)="focusInput()">Focus</button>
    <button type="button" (click)="selectText()">Select</button>
    <button type="button" (click)="blurInput()">Blur</button>
    <shield-text-input #field label="Ticket-ID" [value]="value"></shield-text-input>
  `
})
export class AngularTextInputMethodsDemoComponent {
  @ViewChild('field', { read: ElementRef }) field?: ElementRef<HTMLElement & {
    setFocus: () => Promise<void>;
    setBlur: () => Promise<void>;
    select: () => Promise<void>;
  }>;

  value = 'SHD-12345';

  focusInput() { void this.field?.nativeElement?.setFocus?.(); }
  blurInput() { void this.field?.nativeElement?.setBlur?.(); }
  selectText() { void this.field?.nativeElement?.select?.(); }
}

Guidelines

Immer mit sichtbarem Label einsetzen.
Placeholder nur als Zusatzinfo nutzen.
Autofocus nur sparsam und kontextbezogen verwenden.
Fuer programmatische Steuerung setFocus/setBlur/select nutzen.
Fehlertexte klar und direkt am Feld zeigen.