So today we look into data binding. So what is data binding? And how do we use it in view, and also go through some examples to get much more understanding of the concept. The first thing we'll talk about is V model. All right. So v model is also a kind of a data binding attribute that we used in the previous lecture.

But v model is mostly used for two way data binding. So we'll start off with data binding and just comment everything out. All right, I have committed to the previous code out, but I'll try to manage each of the lecture into a separate branch. So you can go to a specific branch, and you can access the code for that lecture. All right, let's see I have an a tag. And this points to my website.

And my website link is myka Jordan. So if I go here and click on it, I am going to my website. But what if I want this to come from a data property? What if I want this to be dynamic, right? So what we'll do is we're going to create a data object. You know, data has to be a function right.

And inside the data, we are going to create an object and inside that. So what if I want this data property to be binded with this a tag. Now I want this data property to be the link, which is which is a tag points to. So previously we displayed the data properties inside HTML templates using the interpolation method, right. So can we do interpolation in this case, let's see what happens. If I do this view is going to give it an error.

It says that error complete compiling template. The reason is, this is not a valid syntax. Now, we cannot bind data properties to attributes just like that. Now if we want to bind a dynamic property or a data property to an attribute Catch if what we have to do is we need to save, we bind and a semicolon. Now, this becomes a dynamic property. Now inside this, we can bind it to any of our data properties, for example, website link.

Now if I save it, there it is gone. And if I click it, it goes to my website. Now the amazing part of this is who made his map? So yeah, now the amazing part of it is, I can write anything here. I can go to google.com and I'll be gone to google.com. So one more neat trick.

What we can do is we can remove this and up here, we can have an input tag. We can say V model website, Link And inside this placeholder and enter the website URL. So what happens is I have this input tag and whatever the whatever the URL I type in it is going to be automatically bind it to this particular a tag. So as of now, you can see the a tag is pointing to localhost 8080 right now google.com and it shows google.com. So now if I want to go to google.com, I need to press HTTP, HTTPS and Okay, this we need to remove the.google.com. That's simple.

That becomes my website. Alright, so that is how you can bind data properties to different attributes. Now we can do much more interesting things than just creating a dynamic link. What we can also do is We can create a dynamic class, right? Let's check it out. For example, what we can do is we have a h4 tag that says heading.

Right? So for this we have a class that says active. So instead of script, we can say, active means background of light blue. So we have a heading tag, and his background is light blue. So what did I want to make the background dynamic, or I want to switch on and off the background. I wanted to attach the class active whenever I want and remove it from whenever I want.

Now I want this class active to be dynamic, right? I want it to be conditionally be active or I want it to be conditionally not active. So what I'm going to do I'm going to bind this class to a data property. So what we can do is inside a data object, we can create a two bedroom that is, let's say true. So, we can make this class dynamic placing. Once again, we bind, we bind class.

Now inside it, we're going to create object and first thing is going to be the name of the class that is active and the data property that should be a Boolean, which says if the class is active or not, for us, the data properties add to background. All right, so what does this mean? So we are making the class property dynamic for this heading. By making the class active, set to true or false is active. By doing a data property, which is a Boolean, right, so as of now the data property active background is true. So when I hit save, there won't be any difference.

But when I change this act to background to false, the background disappears. So one more interesting thing, what we can do with data binding is have dynamic styles. Right? So for example, let's say I have a heading that has my name on it all right. So, I want this tile to be color blue, I have it color blue right. So what if I want this color property to be dynamic?

So once again, what we can do is we can be binded the bind this so one would need Rick what we can do Instead of typing out v bind every single time, we can just place the colon that's also equal into the V bind this thing should be inside the braces. So we have the color blue right so instead of directly attaching blue to it, what we can do is we can say we can create a custom color data property. So we'll go to our data object and inside that create a new property called custom color. And as of now we'll leave it blank. So in down below, we can create another input tag and which be Morton's custom color. So just to understand what's going on here, we have a custom color data property right.

So this custom color data property can be ordered or its value can be changed using this input variable. And once the custom color data properties, value changes, the property color inside the h1 tag also changes because It's bound to the customer property. So when I go to my website, I can enter a caller name, I can see white, that makes it disappear. I can see blue. I can say red, say yellow. Or I can see orange.

So what's happening is that whenever the value changes inside the input field, the custom colored property is being changed. And when the custom color property is being changed, it's being assigned to the color styling property inside the h1 tag. Alright, so that's it for this one. In the next lecture, we'll look into V model and a small example between one way data binding and two way data binding so that you can understand what's happening. All right.