{"id":271,"date":"2017-08-22T11:56:00","date_gmt":"2017-08-22T09:56:00","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=271"},"modified":"2020-05-28T12:22:39","modified_gmt":"2020-05-28T10:22:39","slug":"data-binding-in-angular","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/","title":{"rendered":"Data Binding in Angular"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">What is Data Binding?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Data binding is a process that creates a link between the application&#8217;s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Data-binding can be one-way, where a change in the state affects the view, or two-way, where a change from the view can also change the model.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following types of bindings are supported by Angular:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Interpolation<\/li><li>Property Binding<\/li><li>Event Binding<\/li><li>Two-way binding<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">What is Angular Interpolation?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Interpolation is a one-way data binding method that is commonly used in angular templates. Data flows from controller to template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">String Interpolation uses template expressions in double curly {{ }} braces to display data from the component, the special syntax {{ }}, also known as moustache syntax. The text between the moustache braces is a template expression that Angular first evaluates and then converts to a string.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!-- &quot;The sum of 1 + 1 is 2&quot; --&gt;\n&lt;p&gt;The sum of 1 + 1 is {{1 + 1}}&lt;\/p&gt;\n\n&lt;!-- &quot;The sum of 1 + 1 is not 4&quot; --&gt;\n&lt;p&gt;The sum of 1 + 1 is not {{variableWithValue4}}&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">What is Property Binding?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Another one-way data binding method in Angular is Property Binding. Property binding is used to bind values to the DOM properties of the HTML elements. Data flows from controller to template. Square brackets around the property indicates that the text assign to it will be evaluated and converted to string.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;span [title]=&quot;titleTextVariable&quot;&gt;This span has a dynamic title...&lt;\/span&gt;\n&lt;span bind-title=&quot;titleTextVariable&quot;&gt;This span has a dynamic title...&lt;\/span&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Data in titleTextVariable will be converted to a string and assigned to the element as its title. Any change in titleTextVariable will trigger an update in Dom to reflect the latest title.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">What is Event Binding?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">User actions such as clicking a link, pushing a button, and entering text raise DOM events. You can use Angular event bindings to respond to these DOM events. Event binding is a one-way data binding method where data flows from template to controller in contrast to previous 2 methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;button (click)=&quot;onClickMeFunction()&quot;&gt;Click me!&lt;\/button&gt; \n&lt;button on-click='onClickMeFunction()'&gt;Click me!&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Clicking on either of the buttons will result in invocation of the function named onClickFunction.<br><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">What is Two-Way Binding?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The feature two-way binding in Angular is derived from the property and event bindings. The property and event bindings are directed one way with the former receiving data into template from the controller and the later sending data from the template to the controller. The two-way binding is a combination of these two bindings; it gets the data from the controller to the template and sets the data from template to the controller.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s one directive in Angular that implements two-way data binding: ngModel. The property binding [ngModel] takes care of updating the underlying input DOM element. The event binding (ngModelChange) notifies the outside world when there was a change in the DOM. Angular allows the shorthand syntax, also called \u201cBanana in a box\u201d, using [(ngModel)] which is combination of property and change event binding of ngModel.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;input [ngModel]=&quot;username&quot; (ngModelChange)=&quot;username = $event&quot;&gt;\n&lt;input [(ngModel)]=&quot;username&quot;&gt;\n&lt;p&gt;Hello {{username}}!&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">When typing into any of the inputs, the input\u2019s value is written into the username model and then reflected back into the view, resulting in a nice greeting.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">What is the use of @Input and @Output?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Parent Component to receive an event from Child to Parent Component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Data Binding? Data binding is a process that creates a link between the application&#8217;s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[22,4,48,46],"class_list":["post-271","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-angular","tag-javascript","tag-spa","tag-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"What is Data Binding? Data binding is a process that creates a link between the application&#039;s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Celilsemi Sam Erkiner\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Celilsemi Sam Erkiner - Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Data Binding in Angular\" \/>\n\t\t<meta property=\"og:description\" content=\"What is Data Binding? Data binding is a process that creates a link between the application&#039;s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2017-08-22T09:56:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-05-28T10:22:39+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Data Binding in Angular\" \/>\n\t\t<meta name=\"twitter:description\" content=\"What is Data Binding? Data binding is a process that creates a link between the application&#039;s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#blogposting\",\"name\":\"Data Binding in Angular\",\"headline\":\"Data Binding in Angular\",\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#articleImage\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"datePublished\":\"2017-08-22T11:56:00+02:00\",\"dateModified\":\"2020-05-28T12:22:39+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#webpage\"},\"articleSection\":\"Front End Engineering, angular, javascript, spa, typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"position\":2,\"name\":\"Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"position\":3,\"name\":\"Software Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"position\":4,\"name\":\"Front End Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#listItem\",\"name\":\"Data Binding in Angular\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#listItem\",\"position\":5,\"name\":\"Data Binding in Angular\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#organizationLogo\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"image\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#authorImage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866\",\"width\":96,\"height\":96,\"caption\":\"Celilsemi Sam Erkiner\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#webpage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/\",\"name\":\"Data Binding in Angular\",\"description\":\"What is Data Binding? Data binding is a process that creates a link between the application's user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/data-binding-in-angular\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"datePublished\":\"2017-08-22T11:56:00+02:00\",\"dateModified\":\"2020-05-28T12:22:39+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Data Binding in Angular","description":"What is Data Binding? Data binding is a process that creates a link between the application's user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.","canonical_url":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#blogposting","name":"Data Binding in Angular","headline":"Data Binding in Angular","author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#articleImage","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"datePublished":"2017-08-22T11:56:00+02:00","dateModified":"2020-05-28T12:22:39+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#webpage"},"isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#webpage"},"articleSection":"Front End Engineering, angular, javascript, spa, typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/celilsemi.erkiner.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","position":2,"name":"Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","position":3,"name":"Software Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","position":4,"name":"Front End Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#listItem","name":"Data Binding in Angular"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#listItem","position":5,"name":"Data Binding in Angular","previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"}}]},{"@type":"Organization","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization","name":"Celilsemi Sam Erkiner","description":"Blog","url":"https:\/\/celilsemi.erkiner.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#organizationLogo","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"image":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author","url":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/","name":"Celilsemi Sam Erkiner","image":{"@type":"ImageObject","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#authorImage","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/litespeed\/avatar\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866","width":96,"height":96,"caption":"Celilsemi Sam Erkiner"}},{"@type":"WebPage","@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#webpage","url":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/","name":"Data Binding in Angular","description":"What is Data Binding? Data binding is a process that creates a link between the application's user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/#breadcrumblist"},"author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"creator":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"datePublished":"2017-08-22T11:56:00+02:00","dateModified":"2020-05-28T12:22:39+02:00"},{"@type":"WebSite","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website","url":"https:\/\/celilsemi.erkiner.com\/blog\/","name":"Celilsemi Sam Erkiner","description":"Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Celilsemi Sam Erkiner - Blog","og:type":"article","og:title":"Data Binding in Angular","og:description":"What is Data Binding? Data binding is a process that creates a link between the application's user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.","og:url":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/","og:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","og:image:secure_url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","article:published_time":"2017-08-22T09:56:00+00:00","article:modified_time":"2020-05-28T10:22:39+00:00","twitter:card":"summary_large_image","twitter:title":"Data Binding in Angular","twitter:description":"What is Data Binding? Data binding is a process that creates a link between the application's user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.","twitter:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png"},"aioseo_meta_data":{"post_id":"271","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-11-14 19:47:18","updated":"2025-07-29 06:55:30","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/\" title=\"Engineering\">Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/\" title=\"Software Engineering\">Software Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/\" title=\"Front End Engineering\">Front End Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tData Binding in Angular\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/celilsemi.erkiner.com\/blog\/"},{"label":"Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/"},{"label":"Software Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/"},{"label":"Front End Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/"},{"label":"Data Binding in Angular","link":"https:\/\/celilsemi.erkiner.com\/blog\/data-binding-in-angular\/"}],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":1,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}