In this video we are going to learn about Property Binding.
Property binding is used to pass data from the component class (component. ts) and setting the value of the given element in the user-end (component. html)
Property binding is an example of one-way databinding where the data is transferred from the component to the class.
Now lets see how can we do perperty binding in angular 10.
Switch to project and here just open app.component.html file.
Now here lets create some input text field.


<input type=\"text\" name=\"firsnum\" />
<input type=\"text\" name=\"secondNum\" />


Now lets create the properties.
So just open app.component.ts and here create the properites.


firstNum=0;
secondNum=0;
Sum = 0;


Now lets bind these properties with these input text and also create a button here.


<input type=\"text\" name=\"firsNum\" #firstNum [value]=\"firstNum\" />
<input type=\"text\" name=\"secondNum\" #secondNum [value]=\"secondNum\" />
<button >Sum</button>


Lets create a function inside the app.component.ts file.


getSum(num1,num2){
this.sum = parseFloat(num1) + parseFloat(num2);
}



Now call this function on button.
So go to the app.component.html file and call function from button.


<button (click) = \"getSum(firstNum.value,secondNum.value)\">Sum</button>


Now just here display the result so write here.


<h1>Sum of Two Number {{sum}}</h1>


Now lets check so switch to the browser.
And here enter the first number let say first number is 18 and secondNumber is 20.
Now click on button and here you can see the addition of two number is 38.
Just try another no so just enter new number let say 26 and 45 and click on sum button and here you can see the result 71.
So in this way you can bind the property in angular 10.