#angular2:angular2 example
An example illustrating how to use [(ng-model)] to set up two way binding using an input element.
Main library: angular2:angular2
Main element: formDirectives
Gist: https://gist.github.com/kasperpeulen/8b288fc737b7069d04eb
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <my-app></my-app> | |
| <script type="application/dart" src="main.dart"></script> | |
| </body> | |
| </html> | |
| import 'package:angular2/angular2.dart'; | |
| import 'package:angular2/src/reflection/reflection.dart' show reflector; | |
| import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; | |
| @Component(selector: 'my-app') | |
| @View( | |
| template: ''' | |
| <p>Your name is: {{myname.value}}</p> | |
| <input #myname placeholder="Type your name." (keyup)> | |
| <p>Your name is: {{ name }}</p> | |
| <input placeholder="Type your name." [(ng-model)]="name"> | |
| ''', directives: const[formDirectives]) | |
| class MyApp { | |
| String _name = 'Kαspεr'; | |
| String get name => _name; | |
| set name (String value) { | |
| _name = value | |
| .replaceAll('a', 'α') | |
| .replaceAll('e', 'ε') | |
| .replaceAll('o', 'ω') | |
| .replaceAll('i', 'ι') | |
| .replaceAll('u', 'υ'); | |
| } | |
| } | |
| main() { | |
| reflector.reflectionCapabilities = new ReflectionCapabilities(); | |
| bootstrap(MyApp); | |
| } |
| name: angular2.angular2_formDirectives | |
| description: > | |
| An example illustrating how to use [(ng-model)] to set up | |
| two way binding using an input element. | |
| homepage: https://gist.github.com/kasperpeulen/8b288fc737b7069d04eb | |
| environment: | |
| sdk: '>=1.0.0 <2.0.0' | |
| dependencies: | |
| angular2: 2.0.0-alpha.29 |