All language subtitles for 3. Updating a Component Template

Now that we started our project up and we've got it running let's start to replace some content on this

default landing screen with the actual content or the actual each team.

All that is required for our application.

Now I'm going to use those terms very often throughout this course I'm going to be saying to you very

often let's change some content that gets displayed to a user.

Anytime I use those words it's almost always a sign that we need to open up a component template file

and replace some of the H2 mail inside there.

And that's exactly what we're going to do here.

We're going to find the component template inside of our file that is responsible for showing all this

starter content right here.

And we're going to replace it with some HCM L to show our application.

Instead the like an H1 a label a text input some checkboxes and so on let's open up our code editor

and get started with that right away between the last video and this one.

I took the liberty of starting up my code editor inside of my P.W. project directory.

I encourage you to pause this video right now and you should open up your code editor as well.

Once you've got your code editor open you're going to see a tremendous number of pre generated files

and folders inside of here.

As I mentioned before we're going to eventually understand what all these different files and folders

do.

But for right now let's just stay focused on making some changes to our app to get some content displayed

that looks like this right here I'm going to find my SRS directory inside there I'll find a folder called

app and then inside the app folder I'll find a file called app component each team L that is our component

template file.

If we open up that file right now we're going to see a tremendous amount of content inside of here.

This is all of the CSX and all the HDL that is required to get this starter page visible on the screen

if you read the comment at the very top it'll say that you should delete all this stuff and start to

add some code for your particular project.

So let's do that right now.

We're gonna delete everything inside this file and then we're going to replace it with a lot of additional

H T.M. to show the H1 label text input and so on.

We're gonna do a pretty good amount of typing right now.

This is all going to be very standard H HTML elements nothing really angular specific just yet.

No.

Let's do some typing to get started.

I'm got first place in each one at the very top that says password generator after that.

Also a label

that says enter link and an input.

Right after that.

Now let's just save this file right away and make sure that we are in fact editing the correct file

and make sure that we see this stuff appear inside of our application going to save this file.

I'm going to flip back over to my browser line the tab that is that look lost forty two hundred and

I'll see the H1 the label and the text input in there.

Okay.

So we're definitely editing the correct file.

Now if you did not see your browser automatically refresh you can just manually refresh the page instead

let's continue adding in some more marked markup or some markup to get all this different content inside

there.

So back over I'm going to find the label and the input that we just put together.

And I'm also going to wrap it with a div.

The reason that we're doing this is to just make sure that all these different form elements that we're

displaying get placed on their own separate lines.

If we don't use a div then all these text inputs and checkboxes and whatnot it will all show up on the

same line okay.

So after that we'll then place another div and inside there we'll place the first of our three different

checkboxes I'll place a label it says use letters and then after that I'll put in input but that type

of checkbox though again if a user checks this checkbox right here it means that they want to have some

letters present in their randomly generated password.

Now we want to show two other checkbox as well.

They're both can have identical structures to what we see right here.

Rather than typing all that stuff out from scratch I'm just going to copy this div and everything inside

of it and then paste it underneath two times there's one and there's two

but here's my first one I'll find the second one is just going to change the label on there to instead

say use numbers.

And then on the third one I'll change it to say use symbols OK.

Let's say this file again let's go back over and make sure everything is now being displayed correctly.

Yeah I'd say that's a good start now just a little bit more.

We need to show a button.

And then one more label and one more text input will go down to the bottom of this file I'll place a

button that says generate and let's wrap that with the device.

Well

then finally at the very bottom we'll do one more div with the label that says your password.

And one more input inside this one does not need a type of checkbox because it's going to be the text

input that shows the user their password that was randomly generated okay.

So that should be it.

Let's save this file.

We're going to flip back over and just make sure we've got the general structure put together.

Yep.

I'd say that looks pretty good.

All right.

So we just took care of all the markup that is required for our project.

And again we put it into a component template file those component template files are always going to

contain all the each e-mail for our application.

It's now all you and I have to do is go back into that component template file and some other files

as you'd probably guess we're going to add in a bunch of additional code to handle stuff like the length

and these checkboxes and make sure that when we eventually click that generate button we actually generate

a password and show it inside that input.

So let's get started on all that interactivity stuff in just a moment.