All language subtitles for 5. Property Binding Syntax

We now have the ability to get some kind of notification anytime a user clicks on that button inside

of our template.

Now we're going to try to reverse that behavior rather than having our template tell us that something

just occurred.

We're gonna figure out how to stuff information into our template so in particular we're gonna make

sure that whenever user clicks on this button rather than doing a console log we're going to try to

update the value of this input right here.

That's going to be very close to the behavior that we need for the final version of our application

because remember the end goal is whenever user clicks on this button we show some randomly generated

password in there.

We're not going to randomly generate the password just yet.

That's something we'll figure out down the line.

So let's figure out how to do this before we start to add in any code.

I want to give you a very quick reminder on how input elements in normal HDL work.

In general I've got a very small code snippet over here just to jog your memory on the top left inside.

I've got a very small snippet of each CML.

And then on the right hand side is a preview of what that H2 looks like if we show an input element

and we give it a value attribute this is referred to as an attribute right here.

And whenever the input is displayed on the screen the initial starting value of that input is going

to be set equal to a SDF but other words if we set the value attribute that's going to initialize the

value of the input okay.

So with then mind let's go back over to our code editor and start writing out some code.

All right.

I'm going to first begin inside of my app component class file inside of here.

We're going to set up a new property inside of our class so at the very top of the class I'm going to

write out password equals empty string like so.

Now if you're not familiar with the syntax inside of a class that is totally okay.

What we have right here is 100 percent equivalent to defining a constructor function and saying this

dot password is empty string.

Inside there though all this line right here does is say that whenever we create a new instance of this

class it is going to add a password property and it's going to start off as an empty string then whenever

user clicks on our button rather than doing the console log we're going to update the value of that

password property bungling to remove the console log.

They'll say this dot password is some random string instead.

So I'll put in something like about my password

all right.

Now at this point time I want you to just look at this class by itself.

Don't worry about any of the other special syntax inside of here.

Don't worry about the fact that we're using angular.

Just look at the class.

The class by itself is really simple and straightforward in nature.

The class has one property outward.

When we first create an instance of this class password is an empty string.

And then if we ever call this method right here we're going to update the value of password.

That is it the by itself.

The class is very simple and straightforward in nature.

Now here's where things start to get a little bit more complicated.

We now need to make sure that we somehow take this password property and throw it into our template

but to do so we'll go back over to our template file.

We're going to find the input at the very bottom.

So this is where we display the generated password and then we're going to set the input or simply the

value property on this input right here.

So this is going to be very close to what you see back over here though on the input element inside

of a set of square brackets.

We're going to put in value well then put down equals.

And then inside of double quotes once again we'll write out password all right.

So rather than discuss what's going on here.

Let's once again just save this file.

Well you will go back over to our application now click on the Generate button and I'll see the text

my password appear inside there.

It's clear that this works.

But let's understand why it works.

First off let's review the syntax right here on that input element.

So quick diagram once again.

This is what we refer to as the property binding syntax.

So we put down a set of square brackets inside there.

We put in the name of the property that we want to set on that element in this case.

We want to set the value property then inside of a set of double quotes.

We put down a expression to say what value we want to stick inside there.

Just like we saw back with that event finding stuff whenever we put inside of here is evaluated as code.

So that is not a string that says password.

That is some javascript code technically typescript at this point but we're just going to say it is

code and it gets evaluated as code so even though it really looks like we are saying put the string

of password inside of that input that is not the case.

This means take a look at our component class instance take a look at its password property though this

one right here.

And whatever that property value is take it in as the actual value for this input and the really important

thing here to also understand is that whenever the password property on the class changes angular automatically

detects that and it's going to automatically take the updated password property and throw it in as the

new value to our input.

There's a little bit of magic there.

Without a doubt it just you know once again we did not have to write on password there we didn't have

to say this dot password we didn't have to say component dot password we didn't have to say app component

dot password or anything like that we just put the name of the property from our class and poof it appeared.

And one last thing I want to show you.

Rather than putting a property name right there we could just as easily tried to call a method that

would return the property we want to stick in instead.

So for example if we go back over to app component we added in a new method called Get password and

inside there if we said return the stop password we can now try to call this method when getting our

password and sticking it into the template over here.

So instead of just referencing the property name password we could call the get password method let's

try saving that as well I'll hit generate and I still see the correct thing.

Show up OK so we've now seen how to set up an event handler.

We've also seen how to set up a property that gets bounced to our class every very last thing.

I'm going to undo that last change.

I just want you to know that we could put in any property name or method name inside there.

So I am going to revert that back to password and I'm going to remove the get password method from the

class as well.

So quick pause now that we've seen and how to get information into the template and out of it.

Well let's continue working on our application in just a moment.