Last active
August 29, 2015 14:18
-
-
Save mitranim/f8638d0d4d10f775a1cb to your computer and use it in GitHub Desktop.
Suggestion for two-way binding shortcut in angular2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Current --> | |
<input bind-style.color="mycolor" | |
on-change="mycolor = $event.target.value" | |
on-custom-event="mycolor = $event.target.value"> | |
<input [style.color]="mycolor" | |
(change)="mycolor = $event.target.value" | |
(custom-event)="mycolor = $event.target.value"> | |
<!-- Maybe consider --> | |
<input bind-style.color:change:custom-event="mycolor"> | |
<input [style.color](change)(custom-event)="mycolor"> | |
<!-- | |
Short-curcuit databinding by listing event names between the bound property name | |
and the bound expression. The expression must have property access syntax | |
(not a function call, not a ternary, etc.). On each of the listed events, | |
the element property value is fed back to the component. | |
In this example, on `change` and `custom-event`, the current `<input>.style.color` | |
is assigned to `<component>.mycolor`. | |
--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment