{"id":3245,"date":"2018-02-22T12:22:38","date_gmt":"2018-02-22T06:52:38","guid":{"rendered":"https:\/\/code4developers.com\/?p=3245"},"modified":"2020-05-06T14:52:20","modified_gmt":"2020-05-06T09:22:20","slug":"interpolation-property-binding-in-angular-4","status":"publish","type":"post","link":"https:\/\/code4developers.com\/interpolation-property-binding-in-angular-4\/","title":{"rendered":"Interpolation &#038; Property Binding in Angular 4"},"content":{"rendered":"<p>In this article, we will discuss about interpolation and property binding in Angular 4. Both are used to bind component class properties to view template.<!--more--><\/p>\n<p><strong>Examples <\/strong><\/p>\n<p>Let\u2019s take simple example of both<\/p>\n<ul>\n<li>We will bind imagePath property of the component class to\u00a0&lt;img&gt;element src property using <strong>interpolation<\/strong> as shown below.<br \/>\n&lt;img src='{{imagePath}}&#8217;\/&gt;<\/li>\n<li>We can achieve the same using Property binding also. Check bellow example of <strong>property biding. <\/strong>&lt;img [src]=&#8217;imagePath&#8217;\/&gt;<\/li>\n<\/ul>\n<ul>\n<li>Here notice the\u00a0&lt;img&gt;element src property is in a pair of square brackets, and the component class property is in quotes.<\/li>\n<\/ul>\n<p>Interpolation and Property binding will drive value in one direction, from a component\u2019s data property into target element property.<\/p>\n<h4 id=\"difference-between-interpolation-and-property-binding\"><strong>Difference between Interpolation and Property binding<\/strong><\/h4>\n<ul>\n<li><strong>Where to use Interpolation?<\/strong>\n<ul>\n<li>In some cases like when we need to concatenate strings we have to use interpolation instead of property binding.<\/li>\n<li>Check this example.<br \/>\n&lt;img src=&#8217;code4developers.com\/{{imagePath}}&#8217; \/&gt;<\/li>\n<\/ul>\n<\/li>\n<li><strong>Where to use Property binding?<\/strong>\n<ul>\n<li>When setting an element property to a non-string data value, you must use property binding.<\/li>\n<li>In the following example, we are disabling a button by binding to the boolean property isDisabled.<br \/>\n&lt;button [disabled]=&#8217;isDisabled&#8217;&gt;Click me&lt;\/button&gt;<\/li>\n<li>If we use interpolation instead of property binding, the button is always disabled irrespective of isDisabled class property value.<br \/>\n&lt;button disabled='{{isDisabled}}&#8217;&gt;Click me&lt;\/button&gt; (this doesn\u2019t work).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"points-to-keep-in-mind-when-using-property-binding\"><strong>\u00a0<\/strong><strong>Points to keep in mind when using Property binding<\/strong><\/h4>\n<ul>\n<li>Remember to enclose the property name with a pair of square brackets. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string.<br \/>\n&lt;span [innerHTML]=&#8217;pageHeader&#8217;&gt;&lt;\/span&gt;<\/li>\n<li>With Property binding we enclose the element property name in square brackets<br \/>\n&lt;button [disabled]=&#8217;isDisabled&#8217;&gt;Click me&lt;\/button&gt;<\/li>\n<li>We can also use the alternate syntax with bind- prefix. This is known as canonical form<br \/>\n&lt;button bind-disabled=&#8217;isDisabled&#8217;&gt;Click me&lt;\/button&gt;<\/li>\n<\/ul>\n<h4 id=\"provide-security-from-malicious-content\"><strong>\u00a0<\/strong><strong>Provide security from malicious content\u00a0 <\/strong><\/h4>\n<ul>\n<li>From security standpoint, Angular data binding sanitizes malicious content before displaying it on the browser.<\/li>\n<li>Both interpolation and property binding protects us from malicious content.<\/li>\n<li>Check bellow example, we are using <strong>interpolation<\/strong>. Notice the malicious usage of &lt;script&gt; tag.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n    selector: 'my-app',\r\n    template: '&lt;div&gt;{{badHtml}}&lt;\/div&gt;'\r\n})\r\n\r\nexport class AppComponent {\r\n    badHtml: string = 'Hello &lt;script&gt;alert(\"Hacking\");&lt;\/script&gt; World';\r\n}<\/pre>\n<ul>\n<li>Angular interpolation sanitizes the malicious content and displays the following in the browser<br \/>\nHello &lt;script&gt;alert(&#8220;Hacking &#8220;);&lt;\/script&gt; World<\/li>\n<li>Let\u2019s change the code and use <strong>property binding<\/strong>.<br \/>\n&#8216;&lt;div [innerHtml]=&#8221;badHtml&#8221;&gt;&lt;\/div&gt;&#8217;<\/li>\n<li>Property binding sanitizes the malicious content slightly differently and we get the following output : Hello alert(&#8220;Hacking&#8221;); World<\/li>\n<\/ul>\n<p>So here the important point to keep in mind is both the techniques protect us from malicious content and render the content harmlessly.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/code4developers.com\/angular-5\/\"><strong>Click Here<\/strong><\/a> to learn more on Angular from our video tutorials.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will discuss about interpolation and property binding in Angular 4. Both are used to bind component class properties to view template.<\/p>\n","protected":false},"author":5,"featured_media":2649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29,114,115],"powerkit_post_featured":[],"class_list":{"0":"post-3245","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular","9":"tag-interpolation","10":"tag-property-binding"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Ql","jetpack-related-posts":[{"id":3520,"url":"https:\/\/code4developers.com\/angular-5-class-binding-ngclass-directive\/","url_meta":{"origin":3245,"position":0},"title":"Angular 5 Class Binding &#038; ngClass Directive","author":"Nisarg Dave","date":"May 2, 2018","format":false,"excerpt":"In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or remove multiple classes from HTML element with example. Examples I have already created first-app component in my Angular 5 application.\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.1-300x100.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3007,"url":"https:\/\/code4developers.com\/angular-4-components\/","url_meta":{"origin":3245,"position":1},"title":"Angular 4 Components","author":"Nisarg Dave","date":"July 28, 2017","format":false,"excerpt":"In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development.\u00a0The advantage of the component-based approach is\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3245,"position":2},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":3245,"position":3},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3376,"url":"https:\/\/code4developers.com\/ionic-project-structure-installation\/","url_meta":{"origin":3245,"position":4},"title":"Ionic Project Structure and Installation","author":"Pratik Maniar","date":"April 1, 2018","format":false,"excerpt":"Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can build mobile, web, and desktop applications with one shared code. In this getting started with Ionic article we will talk\u2026","rel":"","context":"In &quot;Ionic&quot;","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Ionic","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2575,"url":"https:\/\/code4developers.com\/remove-hash-from-application-url-in-angularjs\/","url_meta":{"origin":3245,"position":5},"title":"How To Remove Hash From Application URL In AngularJS","author":"Arif Khoja","date":"June 10, 2017","format":false,"excerpt":"Introduction Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding. To find more, refer the URL https:\/\/docs.angularjs.org\/guide Going further, I assume that you\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3245"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3245\/revisions"}],"predecessor-version":[{"id":6982,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3245\/revisions\/6982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2649"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3245"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}