Description
Data binding is the synchronization of data between the model and view components. To display the component property, you can put its name in the view template, enclosed in double curly braces. Two-way data binding merges property and event binding in a single notation using the directive ngModel.Example
The below example describes use of data binding in the Angular 2:<!DOCTYPE html> <html> <head> <title>Data Binding</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script> <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'app': {defaultExtension: 'ts'}}, map: { 'app': './angular2/src/app' } }); System.import('app/data_binding_main') .then(null, console.error.bind(console)); </script> </head> <body> <my-app>Loading...</my-app> </body> </html>The above code includes the following configuration options:
-
You can configure the index.html file using typescript version. The SystemJS transpile the TypeScript to JavaScript before running the application by using the transpiler option.
-
If you do not transpile to JavaScript before running the
application, you could see the compiler warnings and errors which are
hidden in the browser.
-
The TypeScript generates metadata for each and every class of the code when the emitDecoratorMetadata
option is set. If you don't specify this option, large amount of unused
metadata will be generated which affects the file size and impact on
the application runtime.
-
Angular 2 includes the packages form the app folder where files will have the .ts extension.
-
Next it will load the main component file from the app folder. If there is no main component file found, then it will display the error in the console.
-
When Angular calls the bootstrap function in main.ts, it reads
the Component metadata, finds the 'app' selector, locates an element tag
named app, and loads the application between those tags.
data_binding_main.ts
import {bootstrap} from 'angular2/platform/browser'; //importing bootstrap function import {AppComponent} from "./data_binding_app.component"; //importing component function bootstrap(AppComponent);Now we will create a component in TypeScript(.ts) file as shown below:
data_binding_app.component.ts
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: ` <ul> <li *ngFor="#Item of Items" (click)="onItemClicked(Item)"> {{ Item.name }} </li> </ul> <input type="text" [(ngModel)]="clickedItem.name"> ` }) export class AppComponent { public Items = [ {name: "Butter"}, {name: "Milk"}, {name: "Yogurt"}, {name: "Cheese"}, ]; public clickedItem = {name: ""}; onItemClicked(Item) { this.clickedItem = Item; } }
-
The @Component is a decorator which uses configuration object to create the component and its view.
-
The selector creates an instance of the component where it finds <my-app> tag in parent HTML.
-
Next is *ngFor directive creates the view exports which
we bind to in the template. The * is a shorthand for using Angular 2
template syntax with the template tag.
-
The local variable Item can be referenced in the template and get the index of the array. When you click on the item value, the onItemClicked() event will get activate and Angular 2 will bind the model name from the array with the local variable of template.
-
The model name clickedItem is binded with name and displays the item name in the text box when user click on item name from the list.
Output
Let's carry out the following steps to see how above code works:-
Save above HTML code as index.html file as how we created in environment chapter and use the above app folder which contains .ts files.
-
Open the terminal window and enter the below command:
npm start -
After few moments, a browser tab should open and displays the output as shown below.
-
Save above HTML code as angular2_data_binding.html file in your server root folder.
-
Open this HTML file as http://localhost/angular2_data_binding.html and output as below gets displayed.
No comments:
Post a Comment