Learn Angular: One-way Data Binding with Angular 9 Interpolation and Property Binding

Want to learn Angular? In this video, "Learn Angular: One-way Data Binding with Angular 9 Interpolation and Property Binding", we will learn how we can use Angular one-way data binding with interpolation and property binding.

Data binding is a core concept in Angular 9 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.

{{title}}

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.

[propertyName]="title"

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.

Follow Me:

My Prism Project:

UPDATE: And the winner is... Carl Neumann!!

[longuinni]

Why everything looks so easy with you explaining? Data binding is the most difficult part in WPF but after learning it's really nice.

[luubang]

Crystal clear ! U deserve a milion subs sir

[huizhao]

That is great, I was a WPF developer. The job market now Angular is pretty hot. I love to learn convert my WPF skills to Angular. Thanks Brian!

[VivekSharma-ozku]

Hey Brian, I watched all these until now in sequence and must say, this is really high quality content. I had one suggestion, if you can show building a full blown website with angular keeping the wpf context, it will be so amazing!

[richardjohnston]

Simple yet informative. Looking forward to the next vid.

[georgebamber]

Great video Brian! Looking forward to the next one.

[KALI]

thank you!
Nice and easy explanation of interpolation vs property binding!

[jeffersongil]

Yeah, thanks for the effort to make the videos, and to share your knowledge, is very useful for those who come from the world WPF and we try to learn web development without dying in the attempt...

[MrAmralaa]

can't wait, i believe that i can do more

[carlhneumann]

Thanks for your continuing work on educating us. I'm looking forward to more!!!

[matteobarbieri]

Great! Can you increase the frequency for new videos?

[karelkral]

Nice. Thanks! Why are you not using getTitle(): string {} instead of getTitle() {}? And why is not intellisense working when using {{name.toUpperCase()}}?

[josephscho]

Can you explain when we want to do one-way data binding vs two-way? Thnx.