Let's say you want-to-write a simple data-bing app. When your type in a text box, somewhere in the application would show th E result.
In Angular 1, you can use Ng-model to finish all those stuff, but Angular 2, the concept behind have changed.
<!--index.html -<HTML><Head> <title>Angular 2 Quickstart</title> <Scriptsrc= "Https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></Script> <Scriptsrc= "Https://jspm.io/[email protected]"></Script> <Scriptsrc= "Https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></Script></Head><Body><!--The app component created in App.ts -<Hello></Hello><Script>System.import ('app');</Script></Body></HTML>
Import { Component, View, ' angular2/angular2 '; @Component ({ ' hello '}) @View ({ Template: ' <div> for = ' name ' >name: </label> #ref (KeyUp)/> ' }) Export Class Hello{}bootstrap (Hello);We Add a #ref, which you can name it anything your want after ' # '. And then use ' ref.value ' to the actual value from it.
But only the won ' t work. You also need to watch it. In Angualr 2, this is acomplished by add even listener to the DOM. Here we use ' (KeyUp) '.
[Angular 2] 9. Replace Ng-modle with #ref & Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
