In this session, let us learn about property binding. Property binding is used for passing the data from the component class to the template that is from the source to the view. This property binding can be done in three ways. By using interpolation that is setting the value of a property using interpolation ah by wrapping the property within square brackets are by prepending bind hyphen key words before the property. Just have a look on this example, I am I am trying to use image I am trying to use the image tag image SRC equal to I have to give the value I am trying to retrieve the value from the component class using interpolation. The value of new logo is nothing but a string, which is the name of the JPG file in the name The case again I'm wrapping the property using square brackets.

In the third case, I'm using bind the key word in front of the SRP property you can use interpolation only if the value is a string, if the property value is a boolean value in that case you cannot use interpolation. So, in this example, if you see I have given the property value as a boolean value. So, I cannot use interpolation to retrieve the button status. In that case you have to either use square bracket that is wrapped the property using square brackets ah you can go in front buying keyword. Now, let us try this out component.ts file. Now, let me add the property the property is going to point to an image file where will you add the image file it should be added inside assets folder inside SRC open it Here's your assets folder.

Inside assets, you create a folder of images within which you can add all your images. Now I have added it already, let me open assets inside assets I bought images. Inside images, I've got two images, angular and Node JS. Now, let me come to the class here. Let me add a property new logo equal to within single course, assets slash images slash Angola dot JPG ended with a semicolon. Now let me save this.

I'll go back to home component dot html. It is inside that home component dot html. Now here, the image SRC equal to within double curly braces, I need to use new logo let me add two more syntax also. So here image SRC equal to new logo bind SRC equal to new logo. Now all said let me save this. Now let us check the output.

I'll open the browser here I got dolphin, can you see this? So, whenever you want to pass on the value from the component class to the view, and if you want to assign it to a property in the view, you either you can use it in the form of interpolation or wrapped up property using square brackets. One more thing also we will try. Now let me go to the TS file. Here I will just create another instance variables, button status equal to true now I'll come to the car HTML file, let me create a button button disabled is equal to I cannot use interpolation. So I have to add this disabled with it or wrap this property within square bracket.

And here I can just give it a button status table the button and next one more tober and here I will use an exclamation mark. Let me save this. Now again I can just open it here. Can you see I have added two buttons, one button the value was disabled values true, so I just disabled the other button the disabled value is false. So the button is shown Can you see I can click it. This is about property binding.

For working with property binding, you can wrap the property using square brackets are you can use bind hyphen keyword, the value of the property is nothing but the instance variable which is given in the component class 10 Let us learn about class binding. Thank you