Data binding is a core concept in Angular which allows communication between a component and the DOM, making it very easy to create interactive applications without worrying about pushing and pulling data. One-way data binding in Angular can be done by using either interpolation or property binding.
With Interpolation you can invoke a method in the component, concatenate strings, perform mathematical operations, or change the properties of DOM elements. The Template Expression is represented by the “{{…}}” double curly braces. Angular evaluates the expression and replaces it with the result of the expression.
<h2>{{title}}</h2>
1. Interpolation is one way from component to View
2. Binding source is a Template expression “{{ … }}”
3. The Template Expression must result in a string.
Property binding allows us to bind a property of a DOM element to the value of template expression. The Property Binding uses the “[..]” brackets. The binding target (DOM property) is placed inside the square brackets. The binding source is enclosed in quotes.
<h2 [innerHtml]=”title”></h2>
1. Property Binding is one way from component to View
2. Binding source is a Template expression in quotes “…”
3. Non-string return values are allowed
Both interpolation and property binding provide a one-way data binding. The main difference is that interpolation returns a string, and property binding can return other data types.
If you want to set an element property to a non-string data value, you must use property binding.
“Desktop to Web: A WPF Developers Guide to Learning Angular” is a video tutorial series that will help you take your WPF and WinForms desktop coding skill to the web with Angular. This series will help you understand how your current desktop skills map directly to concepts in Angular to make your learning path to the web as easy and painless as possible.
During each video in this series I will be giving away a one year subscription to Infragistics Ultimate valued at $1,995 USD. Simply subscribe to my channel, like the video, and leave a comment to be entered. Winners are announced in the next video in the series.
Official contest rules: https://brianlagunas.com/desktop-to-web-series-youtube-official-contest-rules/
The Prize: https://www.infragistics.com/products/ultimate
Follow Me:
Twitter: https://twitter.com/brianlagunas
Blog: https://brianlagunas.com
GitHub: https://github.com/brianlagunas
My Prism Project:
Prism Library: http://prismlibrary.github.io/
Become a Patron: https://www.patreon.com/prismlibrary
