All language subtitles for 5. Randomly Generating Text

All right.

Let's go over a solution to these two steps right here.

We're going to first begin by opening up our app component.

Once again here's my app component.

I've got that Lorem sub module right there and it has that sentences function on it.

So to make sure that we've got some initial sentence to display to the user I'm going to initialize

a new property inside of my app component right now inside of app component.

There's already an existing property inside of here of title.

This property gets added in automatically every single time you generate a new project.

It doesn't actually get used at all.

So we can safely delete that property.

Now I'm going to assign a new property to this thing.

I'll call it random text and I'm going to give it an initial value of Lorem dot sentence like so I'm

going to tell you right away that throughout this application you and I are probably going to use different

variables and different property names like all over the place right now.

I would really encourage you to use the name random text right here as we're going to end up doing a

little bit of refactoring to in order to actually make our application work.

And when we start to do that refactoring it's gonna be a lot easier if you and I have some identical

property names right now.

If you have some code that looks like this I would encourage you to change the property that name that

you use to simply random text OK.

So now that we've got that property put together we can now reference that inside of our template.

That's how we're going to achieve the last step right here there to reference a property inside of our

template.

We will open up our component template file which is app component dot each team l inside of here.

I'll find where we have that kind of place holder to show some randomly generated text not going to

delete that hardcoded stuff or then replace it with a reference to that random text property.

Remember if we ever want to print out some content to show to the user we're going to use the template

interpolation syntax which is that set of double curly braces.

Go inside there I'll say random text like so I'll then save this you know flip back over and I can see

I've got some random sentence on the screen now every single time I refresh the page I see a different

random sentence okay.

Let's say this looks pretty good.

Now let's move on to our next set of steps the next we're going to work on is making sure that we can

detect whenever user types inside that text input that we need to detect when the user types in there

and take a look at whatever character the user just added in and we can use that to decide whether or

not the user is entering in text that's identical to our randomly generated string right there right

now we just really need to detect whenever user types inside that text input make sure you add in some

code to detect a typing event also.

Once you add that in make sure that you can verify that it all works by console logging out wherever

the user is typing into the input.

Now just so you know if you start to Google for a solution to step right here you're going to see that

angular has a lot of different ways to handle typing events are essentially input into any input elements

that we already took a look at how to handle text input on our last application around or see our first

application.

Remember it was that password generator.

So I would encourage you rather than googling on how to do some steps like this right here.

Go back to our password generator application and take a look at how we handled text input inside there.

Now I would encourage you to use the same steps to solve this set of steps right here okay.

So again go ahead and give it a shot on your own and we'll come back in the next video and go over resolution

together.