All language subtitles for 6. Interpolation Syntax6

We've now seen examples of how to get information into a template and how to get information out as

well.

We've seen property binding.

Remember this is how we set some property on an element.

It's property binding syntax we make use of those square brackets and then inside we put the name of

the property that we want to set on that element.

We also looked at event binding that has parentheses instead and inside the parentheses.

We put the name of the event.

We want to watch for then with both these pieces of syntax.

We write out a set of double quotes then whatever goes inside there is going to be executed as code

so we can reference different properties or methods that belong to our component class and there's one

other very special part of syntax or piece of syntax so we need to understand.

We've seen how to kind of get information as properties into specific elements but how do we also just

kind of like print out a piece of information in general like display it as raw text that a user can

see.

Well there's one last piece of syntax we need to understand around templates to do so I'm going to go

back over to my editor.

I'm going to open up my app component A.T.M. file once again and then down at the very bottom right

after that last div.

I'm going to try to print out the value of our password property.

So in this case I want to just print the value itself as opposed to applying it as a property to an

existing element.

So to do so we're gonna put in a set of double curly braces.

Now we can write out the name of the property that we want to print from our component class.

In this case I'll just write out password like so that once again.

This right here takes a look at the password property of our component class whatever its value is is

going to be stuck right there inside of our template let's save this.

We'll go back over when our application first loads up.

I don't see anything at the bottom that is because when our component class is first created the password

property gets an initial value of empty string.

But when we click on that generate button that updates the value of the password property it gives it

that my password string or whatever it is going to click on the button and I'll see my password appear

down here at the bottom so once again this is like total magic on the side of angular we just updated

a property on our class and angular automatically detected that and then updated our each team L to

accommodate that's pretty much total magic OK.

So we've now seen how to react to events how to set properties on elements and how to print out plain

information as well.

The printing out information uses the double curly braces just like we saw with the property binding

and the event binding as well.

We are free to also call different methods on our class if we want to.

For example back over inside of our class.

If we added on some method inside of here called get a name write about just get name that's better.

And I returned a string of like I don't know Alex I can now call this method from inside of those double

curly braces.

I will save this go back over once again I can reference get name and call it like a function I save

this you can go back over and right away I will see Alex up here I want to remind you once again for

the third time now we did not have to do this docket name we did not have to do app it name we didn't

have to do component dot name we just wrote the name of the method from our component class that was

it all right.

Now we've seen these three forms of syntax event property and this is technically called interpolation

by the way.

That's pretty much the major core ideas of angular templates believe or not.

Those three pieces of syntax that is the core things that you need to understand now that we've seen

these three different forms of syntax one more pause are going to start to add in some more functionality

to our app in just a moment but before we do really quickly I'm going to remove that example.

I just wanted to show you how we get through plain information into the template.

Now I'm also going to remove the get named method that I just added inside the component as well that's

now quick pause more development in just a moment.