All language subtitles for 2. Adding an Input

Now that my project is all generated I'm going to change into that heights project directory and then

start up my development server inside their between the last video and this one.

I also already started up my code editor.

So here it is right here.

Let's get start working on this project right away.

We already know that there is definitely a couple of different things we're going to have to do if we

want to show a form like this.

Well we're definitely gonna have to probably add in a lot of additional H to email because we're really

just trying to work with some pipes here and we're not really concerned with learning about anything

else around angular.

We're just gonna write out all the HD channel for this directly inside of our app component.

Let's open up our app component and we're going to immediately start to put together some elements to

display this receive her name input right here and then eventually print that information out on the

side then said my editor I'll find my SRT directory inside there is the app folder and inside there

I'll find my component template and the component template is all that place holder starter content

I'm going to select everything inside there and delete it then I'll replace it.

With a div that contains a label I'll give it some text like a e name.

Then after that I'll place an input as usual.

We're gonna set up some event handler on this input element and detect any time that the user types

inside their as we've seen many times we can use that event binding syntax we can write inside their

input because that's the name of the event we want to watch for and whenever that event occurs I'm going

to try to call a method on my app component that we're gonna add in very shortly.

Hold on.

Name change and I'll take the event object and just pass in the target date value property.

Go on name change is gonna be called with some string and that is going to be the name that we want

to pay some money to.

Let's now save this and then go back over to our app component and make sure we define this method.

Inside of my app component.

Yes file I'm going to remove that stand and property right here of title that just gets added in automatically

any time we generate new projects and I'll replace it with a new name property and I'm going to imitate

its type as being a string I'll then define the method on name change Go on name change.

This is gonna taken some value that is a string and I'll use that to update the Name property right

there.

Let's say this dot name is value now that we've got this property of name on our class component of

app.

Let's go back over to our template and we're going to reference that property inside that template and

print it up on the screen.

All right after that div I'm going to place some double curly braces mental printouts that name property

like so.

All right.

So this is one little form feature put together.

So let's save this then flip back over to our application in the browser.

So good to it look close to 40 to 100 now I should be able to type inside of here and see some text

appear on the screen.

Now if I enter in some person's name like let's say my cat's name of Scarlet greater because for some

reason I'm going to pay Scarlett twenty dollars I'll see that the text that comes out is all lowercase

formatted as you can imagine it'd be a lot nicer whenever we start talking about some really official

thing like handling money or payment we printed out this name with some better formatting.

This is where pipes are going to come into play.

Let's take a quick pause right here.

When we come back the next video we'll take a look at our first pipe.