{"id":15400,"date":"2016-12-13T12:15:17","date_gmt":"2016-12-13T10:15:17","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=15400"},"modified":"2016-12-09T18:30:44","modified_gmt":"2016-12-09T16:30:44","slug":"angularjs-2-series-binding-data-databinding","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/","title":{"rendered":"AngularJs 2 Series: Binding The Data With DataBinding"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could be your business logic defined in the component. Databinding comprises of property and event binding. Components have templates and data is passed to the template in the form of static HTML code snippet. With databinding, you go one step further and pass dynamic data to the template. Your component could also listen to DOM events of your view and accordingly perform some action. There are different ways or approaches to databinding and we will see each of these in the following sections. Databinding can be achieved in any of the following ways:<\/p>\n<ul>\n<li><strong>String Interpolation<\/strong> \u2013 expression resolving to a string<\/li>\n<li><strong>Property Binding<\/strong> \u2013 binding data to the property of your HTML element<\/li>\n<li><strong>Event Binding<\/strong> \u2013 binding event to your HTML element<\/li>\n<li><strong>Two Way Databinding<\/strong> \u2013 binding both data and event through the use of ngModel<\/li>\n<\/ul>\n<p><strong>The article assumes you have AngularJs 2 installed and appropriately configured to run the application.<\/strong><\/p>\n<h2>String Interpolation<\/h2>\n<p>It is expressed using {{}} curly brackets. Between these brackets you provide an expression that resolves or evaluates to a string. Let\u2019s write the code that demonstrates string interpolation:<\/p>\n<pre class=\"brush:java\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-databinding',\r\n  templateUrl: '.\/databinding.component.html',\r\n  styleUrls: ['.\/databinding.component.css']\r\n})\r\nexport class DatabindingComponent {\r\n\tprivate myName = \"Rajeev\";\r\n\r\n\tconstructor() { }\r\n}<\/pre>\n<p>The above Typescript class is a <code>DataBindingComponent<\/code> component class. This component simply contains a property named <code>myName<\/code> which holds the value as \u2018Rajeev\u2019. We want to display this value using string interpolation. The component has its own selector and a template file. The selector is a custom HTML element we will use to display the view rendered by this component. The template file <em>databinding.component.html<\/em> represents the view. It will have the following HTML code snippet:<\/p>\n<pre class=\"brush:xml\">&lt;h1&gt;\r\n  {{myName}}\r\n&lt;\/h1&gt;<\/pre>\n<p>As you can see, here we are using string interpolation to the display the value of <code>myName<\/code> property. The property name is passed to {{}} curly bracket which takes it as an expression and resolves to a string. It also means the value of property <code>myName<\/code> is passed as a data to the template or view dynamically by the framework. Rendering this component should display the name \u2018Rajeev\u2019<\/p>\n<h2>Property Binding<\/h2>\n<p>Let\u2019s consider the same above component class. We will change the code in the template file <em>databinding.component.html<\/em> to demonstrate property binding:<\/p>\n<pre class=\"brush:xml\">&lt;input type=\"text\" value=\"Rajeev\" \/&gt;<\/pre>\n<p>The above code is fairly straightforward. It just displays the <code>input<\/code> field with the value hard coded as \u2018Rajeev\u2019. Nothing great about it. Now lets remove the hard coding and use property binding instead. To use property binding, we have to define the property in square [] brackets.<\/p>\n<pre class=\"brush:xml\">&lt;input type=\"text\" [value]=\"myName\" \/&gt;<\/pre>\n<p>The <code>value<\/code> attribute now has the enclosing square [] brackets. It means it is no longer a regular HTML attribute of the <code>input<\/code> element. But it is now a DOM <em>value<\/em> property which holds the value called \u2018myName\u2019. As you guessed it correctly, the expression inside the quotation mark is the property name we defined in our class component. It effectively means we bound the data or the value of the property \u2018myName\u2019 to the DOM <em>value<\/em> property. You should now see the value \u2018Rajeev\u2019 in the input field.<\/p>\n<h2>Event Binding<\/h2>\n<p>Let\u2019s again change the template code in the <em>databinding.component.html<\/em> file to demonstrate event binding:<\/p>\n<pre class=\"brush:xml\">&lt;button (click)=\"onClick()\"&gt;Click Me&lt;\/button&gt;<\/pre>\n<p>The above code has a <code>button<\/code> element which has a native DOM <code>click<\/code> event enclosed with parentheses (). Upon clicking, it makes a call to the <code>onClick()<\/code> method. The <code>onClick()<\/code> method will be defined in our <code>DataBindingComponent<\/code> component class which will simply alert that it was clicked. Let\u2019s change the code in our component to add the <code>onClick()<\/code> method.<\/p>\n<pre class=\"brush:java\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-databinding',\r\n  templateUrl: '.\/databinding.component.html',\r\n  styleUrls: ['.\/databinding.component.css']\r\n})\r\nexport class DatabindingComponent {\r\n\tonClick() {\r\n\t\talert(\"I am clicked\");\r\n\t}\r\n\r\n\tconstructor() { }\r\n}<\/pre>\n<p>This way we achieved what is called as event binding with the native DOM event.<\/p>\n<p>So far you have seen native DOM property and event binding. Going ahead with AngularJs 2 series, I will also demonstrate custom property and event binding in my next article.<\/p>\n<h2>Two Way DataBinding<\/h2>\n<p>Two way databinding seemed to be very popular at least with Angular 1.x but its not the case now. Its actually a bit performance overhead in using two way databinding and certainly not recommended unless there is a real need for it. But you can still have two way databinding if you love this feature. Let\u2019s tweak our original <code>DataBindingComponent<\/code> component class.<\/p>\n<pre class=\"brush:java\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-databinding',\r\n  templateUrl: '.\/databinding.component.html',\r\n  styleUrls: ['.\/databinding.component.css']\r\n})\r\nexport class DatabindingComponent {\r\n\titem = {\r\n\t\tname: \"iPhone\",\r\n\t\tqty: 100,\r\n\t\tamount: \"$200\"\r\n\t}\r\n\r\n\tconstructor() { }\r\n}<\/pre>\n<p>As you can see from the above code, we will create an Item object property that will have item name, quantity and amount. Now we will change the template file <em>databinding.component.html<\/em> to incorporate two <code>input<\/code> elements. Lets look at the code:<\/p>\n<pre class=\"brush:xml\">&lt;input type=\"text\" [(ngModel)]=\"item.name\" \/&gt;\r\n&lt;br&gt;\r\n&lt;input type=\"text\" [(ngModel)]=\"item.name\" \/&gt;<\/pre>\n<p>We have two <code>input<\/code> elements defined so that we can demonstrate the two way databinding feature. Each input element has a <code>ngModel<\/code> property enclosed with parentheses () and square brackets []. It means <code>ngModel<\/code> will act both as a property and event binding attribute. We will assign <code>item.name<\/code> model object property as a value. If you run the app, you will see changes made in one input field is reflected in another and vice versa. This is because changes to view is triggered as an event and the model object which is our component is updated and the moment it is updated it simultaneously reflected on the view. This is all with the magic of <code>ngModel<\/code> property.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/techorgan.com\/javascript-framework\/angularjs-2-series-binding-the-data-with-databinding\/\">AngularJs 2 Series: Binding The Data With DataBinding<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\">WCG partner<\/a> Rajeev Hathi at the <a href=\"http:\/\/techorgan.com\/\">TECH ORGAN<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could be your business logic defined in the component. Databinding comprises of property and event binding. Components have templates and data is passed to the template in the form of static HTML code snippet. &hellip;<\/p>\n","protected":false},"author":91,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-15400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-13T10:15:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rajeev Hathi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajeev Hathi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\"},\"author\":{\"name\":\"Rajeev Hathi\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a31899e91ce8c7e23aa3835a86bc749f\"},\"headline\":\"AngularJs 2 Series: Binding The Data With DataBinding\",\"datePublished\":\"2016-12-13T10:15:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\"},\"wordCount\":855,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\",\"name\":\"AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-12-13T10:15:17+00:00\",\"description\":\"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"AngularJs 2 Series: Binding The Data With DataBinding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a31899e91ce8c7e23aa3835a86bc749f\",\"name\":\"Rajeev Hathi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7b3d1f5c751db08d0cecf939d205a54df4f1e8925989025e169b55425423fe40?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7b3d1f5c751db08d0cecf939d205a54df4f1e8925989025e169b55425423fe40?s=96&d=mm&r=g\",\"caption\":\"Rajeev Hathi\"},\"description\":\"Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled 'Apache CXF Web Service Development' and shares his technical knowledge through his blog platform techorgan.com\",\"sameAs\":[\"http:\/\/techorgan.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/rajeev-hathi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026","description":"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/","og_locale":"en_US","og_type":"article","og_title":"AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026","og_description":"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-12-13T10:15:17+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Rajeev Hathi","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Rajeev Hathi","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/"},"author":{"name":"Rajeev Hathi","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a31899e91ce8c7e23aa3835a86bc749f"},"headline":"AngularJs 2 Series: Binding The Data With DataBinding","datePublished":"2016-12-13T10:15:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/"},"wordCount":855,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/","name":"AngularJs 2 Series: Binding The Data With DataBinding - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-12-13T10:15:17+00:00","description":"Introduction Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-binding-data-databinding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"AngularJs 2 Series: Binding The Data With DataBinding"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a31899e91ce8c7e23aa3835a86bc749f","name":"Rajeev Hathi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7b3d1f5c751db08d0cecf939d205a54df4f1e8925989025e169b55425423fe40?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7b3d1f5c751db08d0cecf939d205a54df4f1e8925989025e169b55425423fe40?s=96&d=mm&r=g","caption":"Rajeev Hathi"},"description":"Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled 'Apache CXF Web Service Development' and shares his technical knowledge through his blog platform techorgan.com","sameAs":["http:\/\/techorgan.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/rajeev-hathi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15400"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}