ngModel like two-way-databinding für Komponenten in Angular


Da es sich bei Angular nur noch im Komponenten handelt, ist es hier natürlich auch wichtig wie man Daten an Komponenten weitergibt und auch wieder zurückgeben kann. Dafür gibt es zwei wichtige Dekoratoren “@Input” um Daten an eine Komponenten zu übergeben und “@Output“ um Daten wieder “zurückzugeben”.

Um ein two-way-databinding zu erstellen gibt es mindestens zwei Möglichkeiten.

V1 eine ngModel Like Datenbinding mit “banana in the box” Syntax  [(name)] hier muss in der Childkomponente bei der Namensgebung des Output Dekorators darauf geachtet werden, das dieser am Ende des Namens “Change” stehen hat und der Name selbst dem vom Input Dekorator entspricht.

V2 hier handelt es sich um die “normale” Bindung mit zwei Attributen eine für die Eingabe der Werte mit eckigen Klammern  “[age]” und dann noch um eine Eventbindung mit  runden Klammern “(ageChanged)” um die Daten die aus der Child Komponente zurückgegeben werden auszuwerten. Auch hier werden wieder zwei Dekoratoren benötigt der Input um die Daten an die Komponente zu senden und der Output Dekorator um das Changed Event aufzurufen.

Parent Komponente

Child Komponente

Wie man in beiden Fällen sieht wird in der Child Komponente für den Output Dekorator ein EventEmitter erstellt mit einem bestimmten Typen (bei uns string), der als Rückgabewert im emit für den EventEmitter übergeben werden muss. Bei dem Wert den man an emit übergibt, handelt es sich um den Rückgabewert und dieser muss immer entsprechend “manuell” angestoßen werden, bei uns z.B. über das “keyup” Event unseres Inputs.

Dazu gibt es noch ein funktionierendes Plunkr Beispiel.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s