Angular Introduction to Data Binding, Property, and Class Binding and I'm Farish Kashifishad and in this video, I'm going to discuss property and class bindings in Angular and there's a common theme with these one way data bindings as the flow of data goes from the component to the template on the screen. I have the Cloud Academy lab environment on the left and the Angular development server on the right. I currently have the HTML template open for the app component and I will use this to demonstrate two forms of data binding, and the first form of binding I will demonstrate is property binding. Property binding is a form of one-way data binding where the value moves in one direction from a components property to a target elements property and this allows the component to set the values of those HTML properties dynamically. Now, looking at the app component template, what I will do is bind the source property of the image element to a components value.

I'm going to copy this existing URL and transition to the app component. Inside of the class I will add a new property. I will call this property logo image URL and I will set it equal to that existing URL. Now, as a reminder, Angular does use TypeScript and if I want to avoid any type inference, I can add a colon, then type 'string' to set the type of this value transitioning back to the template. To set up the property binding, I need to wrap the source in square brackets. This indicates to Angular that the source property is now a dynamic expression. Of course there's an error on the screen because I've yet to set the value to this dynamic expression and I will set it equal to local image URL that I created a few moments ago inside of the class, and now the image appears to the right. This allows me to create dynamic situations with the source property coming from the app component.

Now, the second type of binding I will demonstrate is class binding. Class binding allows you to dynamically set CSS classes of elements in your templates based on a condition defined in your components class and I will do so on this H1 element and the pattern that you will notice is writing. These bindings are very similar. Now, going over to the app component CSS file, there's this class text color that makes the font color red. This is what I will bind going back to the template. The H1 element has no class so I will begin with square brackets, and inside of them I will type class.text-color, and nothing is happening yet. Just like property binding earlier, I need to set up a value in the app component transitioning back to the app component inside of the class. Once again I will be creating a property and setting the type. Using TypeScript I will type textcolor boolean false.

Now, going back to the template file, I will set the class binding equal to the textcolor. And one thing to note here, the class property value has to be wrapped in quotes. Now, of course, nothing is happening because the value of textcolor is currently false. Going back to the app component, I will change that value from false to true, and the H1 element is now red. So, both property and class binding are one-way forms of data binding that are driven by a value inside of a component. That value is then used to do something dynamically inside of the template. And that's it. Thanks for watching.

Angular - Introduction to Data Binding: Property and Class Binding

About

Learning Objectives

Intended Audience

Prerequisites