Two-way data binding
Now, we'll take a look at two-way data binding, which usually goes hand-in-hand with forms.
In one-way data binding, we embedded the instance's property into the HTML template. The direction went only from the instance to the HTML.
But with form input fields, we can propagate its values from the HTML input to instance properties and back to HTML. In other words, you can change the instance's property by changing the input value, but you can also change the input value by changing the instance's property. This is why it's called two-way binding.
Better still, let's create an example. We'll create a page that includes the <my-form> custom element:
<!-- web/index.html -->
<html>
<head>
<script async src="packages/browser/dart.js"></script>
<link rel="import" href="my-form.html">
</head>
<body>
<my-form></my-form>
<script type="application/dart" src="main.dart"></script>
<...
