Auslesen von Text-Eingaben aus Webcomponents in Angular

[BenRichter]

Entschuldigung, wenn ich hier zu oft nachfrage, aber aus der Dokumentation erschließt sich mir leider bis auf das Einbinden der Webcomponenten nicht, wie ich Daten aus diesen ziehen kann. Am Beispiel Angular ist das klassische data-binding per Model so leider nicht möglich:

<kol-input-text _type="text" _id="mein_text" _name="mein_text" [(ngModel)]=eingabe>
    Texteingabe
</kol-input-text>

Ein Beispiel, wie einfaches Data-Binding funktionieren würde bzw. wie die EventCallback-Funktion _on zu verwenden ist, wären sicherlich hilfreich.

[deleonio]

Hallo @BenRichter,

bei allen _on Propteries verwenden wir innerhalb von KoliBri ein Callback-Objekt. Innerhalb des Callback-Objects gibt es unterschiedliche Events, auf die man reagieren kann. Der Vorteil davon ist, dass wir es einfach erweitern können.

Type:

kolibri/packages/library/src/types/input/types.ts

Line 38 in cfcefc5

export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus;

Link: https://codesandbox.io/s/angular-get-input-values-w1rn71?file=/src/app/app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  eingabe = "Marko";
  callbacks = {
    onChange: (_event, value) => {
      console.log(value);
      this.eingabe = value;
    }
  };
}

<div>
  <kol-input-text
    [_type]="text"
    [_id]="vorname"
    [_name]="vorname"
    [_value]="eingabe"
    [_on]="callbacks"
  >
    Texteingabe
  </kol-input-text>
</div>