Hello, everyone, again, so.
We talked about using string interpolation in the last lesson, so in this lesson, we're going to talk
about property binding.
In fact, we could technically say that string interpolation and property binding are one and the same.
Therefore, their usage is pretty similar to each other.
Right.
It's now already we'll see that, as we mentioned, we can change the property of a view element with
property binding, and we can do this with one way communication from typescript to HD mil, just as
in string interpolation.
Now, to understand this method a little easier, let's let's change a button to be active or inactive,
for example, will add a button on the HTML page of this component.
And with this button, we can add a remove a new product, we'll say, or we could always use it for
some other process.
But the important thing here is how to use this method.
So.
Now we'll add a button where we can add products.
And yeah, so we can switch to the typescript file.
So now let's have a look and see what's happening in the browser.
So the newly added button is here, it seems active.
And here, I'll want to make this button passive.
So one of the easiest ways to do that would be to use the disabled attribute for the button in HTML.
And look at now that I'll use it in HTML in the file here and the button is disable, but there might
be a problem.
So when I wanted to be passive, I'll have to come back and change from here.
Well, not exactly the most efficient way to do it, but what we want to do is provide this control
over the typescript file.
And here we can talk about some of the properties.
So now I want to show you some of the few important things that we'll need to know.
Attributes and properties are not the same, right?
You follow.
So attributes are used in HTML and properties are used in Dom.
So attributes initialise domme properties.
Gotcha.
Right, so let me say that again, attributes initialised some properties, attributes are used in HTML
properties and dom so attributes initialise dom properties and then they are done.
So initial values of attributes do not change, but the properties can change.
So let's have a look at using properties to see this distinction.
It's not just define a new boolean value in the typescript file.
And all right, false as the initial value and in order to use this feature in the Gmail file, I just
have to use it and I'll just put it in square brackets.
Right.
And that's the way they will specify that this expression we use is an angular prop., not HTML attribute.
And then I should state the value of this feature just like this.
And see, now we've made the property definition, so now we can manage this button in the typescript
file.
So when I make it through the button, I'll be active and actually we can develop this a little bit
further by writing a function.
So I want to change this button state dynamically.
And prepare this function in constructor.
And I want to boolean variable value to change in four seconds, OK?
So in other words, our button will change dynamically and without any intervention, so we realize
this function by binding the property HTML file.
Are we prepared in the typescript file?
And now we can easily see it in the browser.
And we also learn how to use property binding, right?
So before we finish up here, I do want to talk a little bit about this idea of string interpolation
and property binding.
Like I said at the beginning of the lesson, we can actually use these two communication methods interchangeably
in many places.
So now let me show you another example, so we've just prepared this boolean variable for the property
binding, but now.
I'm going to use it as string interpolation for output, so look at this.
When you do it this way, it shows us the boolean value as a result.
All right, so now just prepare a while, the same thing with property binding.
And again, we get the same result.
See, so that's exactly what I meant, so we've used the variable here for both string interpolation
and property binding.
And look at the result, it's the same.
So the important thing here is to know when to use string interpolation and when to use property binding.
So here's my suggestion for you.
If you're going to get an output or text, print your template, then you would prefer string interpolation.
And if you want to change a property, for example, and HTML property, just like we've done here,
then property binding will be your preference.
All right.
So don't think about it.
Too much of it.
Still a little fuzzy.
We're going to get into this situation frequently throughout the course.
And finally, I don't want you to confuse the writing formats of these two communication methods, we're
making an HTML property definition for property binding, so we need to pay attention to this in square
brackets and double quotation marks right here.
Right.
So remember to use double curly brackets and string interpolation.
I think that's enough for now, see in the next lesson.