{"id":59696,"date":"2018-05-02T17:19:19","date_gmt":"2018-05-02T11:49:19","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59696"},"modified":"2024-04-12T14:20:45","modified_gmt":"2024-04-12T08:50:45","slug":"angular-data-binding","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/","title":{"rendered":"Angular Data Binding"},"content":{"rendered":"<h1>Angular Data Binding<\/h1>\n<p class=\"VSKILLbodytext\">Angular Data binding is the automatic synchronization of data between the Model and the View components. The way that Angular implements data-binding lets you treat the Model as the single-source-of-truth in your application. The View is a projection of the Model at all times. Data binding is the process that establishes a connection between the application UI and business logic. If the binding has correct settings and the data provides proper notifications, then whenever the data changes its value, the elements that are bound to the data reflect changes automatically.<\/p>\n<p>A template combines HTML with Angular markup that can modify the HTML elements before they are displayed. Template <em>directives<\/em> provide program logic, and <em>binding markup<\/em> connects your application data and the document object model (DOM).<\/p>\n<ul>\n<li><em>Event binding<\/em> lets your app respond to user input in the target environment by updating your application data.<\/li>\n<li><em>Property binding<\/em> lets you interpolate values that are computed from your application data into the HTML.<\/li>\n<\/ul>\n<p>Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports <em>two-way data binding<\/em>, meaning that changes in the DOM, such as user choices, can also be reflected back into your program data.<\/p>\n<p class=\"VSKILLbodytext\"><strong>IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" rel=\"attachment wp-att-61497\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-61497\" src=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" srcset=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png 1050w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-300x48.png 300w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-768x124.png 768w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-1024x165.png 1024w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-712x115.png 712w\" alt=\"\" width=\"1050\" height=\"169\" \/><\/a><\/p>\n<ul>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/practice\/skills\/Web-Development\/Angular-4\" target=\"_blank\" rel=\"noopener\">Practice Test for Angular4 <\/a><\/li>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" target=\"_blank\" rel=\"noopener\">Govt Certification in Angular 4<\/a><\/li>\n<li><a href=\"https:\/\/www.vskills.in\/certification\/blog\/\">Blog posts on Angular 4 and Web Development<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/web-development\/angular-4\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55483 size-full\" src=\"http:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/05\/Back-Arrow.jpg\" alt=\"Angular 4 Tutorial Index\" width=\"47\" height=\"52\" \/>Back to Angular 4 Tutorial Main Page <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular Data Binding Angular Data binding is the automatic synchronization of data between the Model and the View components. The way that Angular implements data-binding lets you treat the Model as the single-source-of-truth in your application. The View is a projection of the Model at all times. Data binding is the process that establishes a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[7230,7231,5743],"tags":[7221,7227,7235,7309,7236,7308,7268,7226,7234,7232,7223,7233],"class_list":["post-59696","page","type-page","status-publish","hentry","category-angular-2","category-angular-4","category-web-development","tag-angular","tag-angular-4","tag-angular-4-tutorial","tag-angular-binding","tag-angular-cli","tag-angular-data","tag-angular-data-binding","tag-angular-js","tag-angular-js-tutorial","tag-angular-tutorial","tag-angularjs","tag-angularjs-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Data Binding - Tutorial<\/title>\n<meta name=\"description\" content=\"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.\" \/>\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.vskills.in\/certification\/tutorial\/angular-data-binding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Data Binding - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:50:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/\",\"name\":\"Angular Data Binding - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"datePublished\":\"2018-05-02T11:49:19+00:00\",\"dateModified\":\"2024-04-12T08:50:45+00:00\",\"description\":\"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"width\":1050,\"height\":169},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Data Binding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Data Binding - Tutorial","description":"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.","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.vskills.in\/certification\/tutorial\/angular-data-binding\/","og_locale":"en_US","og_type":"article","og_title":"Angular Data Binding - Tutorial","og_description":"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:50:45+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/","name":"Angular Data Binding - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","datePublished":"2018-05-02T11:49:19+00:00","dateModified":"2024-04-12T08:50:45+00:00","description":"Take Angular Data Binding tutorial and learn the automatic synchronization of data between the Model and the View components. Read here.","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#primaryimage","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","width":1050,"height":169},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-data-binding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Angular Data Binding"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=59696"}],"version-history":[{"count":6,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59696\/revisions"}],"predecessor-version":[{"id":64214,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59696\/revisions\/64214"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=59696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=59696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=59696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}