45_assignment_solution

0:02

S… Speaker 1 (45_assignment_solution)

Were you successful? Let's solve it together.

0:06

S… Speaker 1 (45_assignment_solution)

I'll start right below this ordered list and add a button

0:10

S… Speaker 1 (45_assignment_solution)

with some CSS classes button,

0:12

S… Speaker 1 (45_assignment_solution)

button primary,

0:13

S… Speaker 1 (45_assignment_solution)

where I will say display details.

0:16

S… Speaker 1 (45_assignment_solution)

Or maybe you should even say toggle displays now that I think about it,

0:20

S… Speaker 2 (45_assignment_solution)

but I'll leave it at this.

0:21

S… Speaker 1 (45_assignment_solution)

Then I'll add my paragraph where I say any

0:25

S… Speaker 1 (45_assignment_solution)

text you like here.

0:26

S… Speaker 1 (45_assignment_solution)

I will stick to secret password equals tuna.

0:28

S… Speaker 1 (45_assignment_solution)

And I only want to display this,

0:31

S… Speaker 2 (45_assignment_solution)

well,

0:31

S… Speaker 1 (45_assignment_solution)

if it is not displayed.

0:33

S… Speaker 1 (45_assignment_solution)

And if it is displayed,

0:34

S… Speaker 1 (45_assignment_solution)

I want to not display it.

0:36

S… Speaker 1 (45_assignment_solution)

So really toggle it.

0:37

S… Speaker 1 (45_assignment_solution)

That's super easy to implement.

0:40

S… Speaker 1 (45_assignment_solution)

I'll add a property to my app component,

0:42

S… Speaker 1 (45_assignment_solution)

which I'll name show secret,

0:44

S… Speaker 1 (45_assignment_solution)

any name you like,

0:46

S… Speaker 2 (45_assignment_solution)

of course.

0:46

S… Speaker 1 (45_assignment_solution)

And I will set this to false initially.

0:48

S… Speaker 1 (45_assignment_solution)

And now in my app component,

0:51

S… Speaker 1 (45_assignment_solution)

I'll add a click listener to my button with event

0:55

S… Speaker 1 (45_assignment_solution)

binding.

0:56

S… Speaker 1 (45_assignment_solution)

And here I will simply set show secret

1:00

S… Speaker 1 (45_assignment_solution)

equal to what show secret currently is not.

1:05

S… Speaker 1 (45_assignment_solution)

So that is a quick and easy way of toggling it.

1:08

S… Speaker 1 (45_assignment_solution)

So if it is false,

1:09

S… Speaker 1 (45_assignment_solution)

it will be set to true.

1:10

S… Speaker 1 (45_assignment_solution)

If it was true,

1:11

S… Speaker 1 (45_assignment_solution)

it will be set to false.

1:12

S… Speaker 1 (45_assignment_solution)

Now with that,

1:14

S… Speaker 1 (45_assignment_solution)

I can add ngIf here and check if showSecret

1:18

S… Speaker 1 (45_assignment_solution)

is true and only show it in this case.

1:20

S… Speaker 1 (45_assignment_solution)

Now with this and ngSurf still running,

1:23

S… Speaker 1 (45_assignment_solution)

if we go back and I click this,

1:24

S… Speaker 1 (45_assignment_solution)

now you see the toggling works as expected.

1:28

S… Speaker 1 (45_assignment_solution)

So the first three tasks are already solved.

1:33

S… Speaker 1 (45_assignment_solution)

Now let's move on to the fourth one,

1:35

S… Speaker 1 (45_assignment_solution)

logging it to the console.

1:36

S… Speaker 2 (45_assignment_solution)

For this,

1:38

S… Speaker 1 (45_assignment_solution)

I'll actually duplicate this button and comment out the first solution with

1:42

S… Speaker 1 (45_assignment_solution)

the easy toggling,

1:44

S… Speaker 1 (45_assignment_solution)

because for logging,

1:45

S… Speaker 1 (45_assignment_solution)

I will call a method now,

1:47

S… Speaker 1 (45_assignment_solution)

onToggleDisplay maybe,

1:50

S… Speaker 1 (45_assignment_solution)

or onToggleDisplay,

1:53

S… Speaker 1 (45_assignment_solution)

onToggleDetails,

1:55

S… Speaker 1 (45_assignment_solution)

excuse me, any name you like though.

1:57

S… Speaker 1 (45_assignment_solution)

I'll add this as a method in the app component.

2:00

S… Speaker 1 (45_assignment_solution)

And first of all,

2:02

S… Speaker 1 (45_assignment_solution)

I will still use my toggling code here.

2:04

S… Speaker 1 (45_assignment_solution)

So I will set this show secret to what show secret is not.

2:08

S… Speaker 1 (45_assignment_solution)

But then I want to log it.

2:10

S… Speaker 1 (45_assignment_solution)

So I'll name this log and it should be an empty array at the beginning.

2:14

S… Speaker 1 (45_assignment_solution)

And then here I will simply say this log push.

2:18

S… Speaker 1 (45_assignment_solution)

And I want to push a new number.

2:22

S… Speaker 1 (45_assignment_solution)

And this number should actually take into account the current length

2:26

S… Speaker 1 (45_assignment_solution)

of this.

2:26

S… Speaker 1 (45_assignment_solution)

So if this is...

2:29

S… Speaker 1 (45_assignment_solution)

at the beginning has zero items.

2:31

S… Speaker 1 (45_assignment_solution)

This will be zero.

2:32

S… Speaker 1 (45_assignment_solution)

So I'll add plus one.

2:34

S… Speaker 1 (45_assignment_solution)

So if you have one element in the array,

2:36

S… Speaker 1 (45_assignment_solution)

the length will be one.

2:38

S… Speaker 1 (45_assignment_solution)

So the next element should have a value of two.

2:40

S… Speaker 1 (45_assignment_solution)

So this adds these items to the log.

2:44

S… Speaker 1 (45_assignment_solution)

Now I will output it below the paragraph and I will choose

2:48

S… Speaker 1 (45_assignment_solution)

a div element here.

2:49

S… Speaker 1 (45_assignment_solution)

I will use ng4 on it.

2:51

S… Speaker 1 (45_assignment_solution)

And we learned that we use ng4 by saying let

2:57

S… Speaker 1 (45_assignment_solution)

And now we could say log item any name you like of

3:01

S… Speaker 2 (45_assignment_solution)

log.

3:01

S… Speaker 1 (45_assignment_solution)

So of the property you want to loop through or generally the data piece you want to

3:06

S… Speaker 1 (45_assignment_solution)

loop through.

3:06

S… Speaker 1 (45_assignment_solution)

That could also be a method called returning an array.

3:08

S… Speaker 1 (45_assignment_solution)

It has to be an array though.

3:10

S… Speaker 1 (45_assignment_solution)

So here we loop through the log.

3:14

S… Speaker 1 (45_assignment_solution)

And between the div opening and closing tags,

3:18

S… Speaker 1 (45_assignment_solution)

I can now use string interpolation to output by log item.

3:22

S… Speaker 1 (45_assignment_solution)

Now we didn't do this in the last lectures,

3:24

S… Speaker 1 (45_assignment_solution)

but I told you that log item is a variable we can now use in the template.

3:28

S… Speaker 1 (45_assignment_solution)

And that's exactly what we're doing here.

3:30

S… Speaker 1 (45_assignment_solution)

I'm outputting log item.

3:32

S… Speaker 1 (45_assignment_solution)

So with this,

3:34

S… Speaker 1 (45_assignment_solution)

if we have a look at our application.

3:37

S… Speaker 1 (45_assignment_solution)

and I click this button,

3:38

S… Speaker 1 (45_assignment_solution)

you see that I add this list.

3:41

S… Speaker 1 (45_assignment_solution)

It's jumping around because I'm adding and removing this secret password,

3:45

S… Speaker 1 (45_assignment_solution)

but you see the list is growing as expected,

3:48

S… Speaker 1 (45_assignment_solution)

the log is working.

3:49

S… Speaker 1 (45_assignment_solution)

Now about that coloring,

3:52

S… Speaker 1 (45_assignment_solution)

the fifth step here.

3:54

S… Speaker 2 (45_assignment_solution)

Well,

3:55

S… Speaker 1 (45_assignment_solution)

it's easy to do when using a number like this.

3:57

S… Speaker 1 (45_assignment_solution)

When doing so,

3:59

S… Speaker 1 (45_assignment_solution)

I'll go to my div,

4:01

S… Speaker 2 (45_assignment_solution)

And I will start with the style,

4:03

S… Speaker 2 (45_assignment_solution)

the black -blue background.

4:04

S… Speaker 1 (45_assignment_solution)

So we'll use ng -style and we learned we need property

4:08

S… Speaker 1 (45_assignment_solution)

binding for this to work correctly because we need to pass a JavaScript object configuring

4:12

S… Speaker 1 (45_assignment_solution)

our styles when we want to attach which styles.

4:16

S… Speaker 1 (45_assignment_solution)

So the style I want to attach is the background color.

4:19

S… Speaker 1 (45_assignment_solution)

I'll again use camel case notation,

4:22

S… Speaker 1 (45_assignment_solution)

though you could use single quotation marks to have background dash color

4:26

S… Speaker 1 (45_assignment_solution)

as a name.

4:28

S… Speaker 1 (45_assignment_solution)

And now here it's easy to check if logItem is a number because

4:32

S… Speaker 1 (45_assignment_solution)

I want to check if logItem is greater or equal than five.

4:36

S… Speaker 1 (45_assignment_solution)

In which case background color should be blue.

4:40

S… Speaker 1 (45_assignment_solution)

This is a string.

4:41

S… Speaker 1 (45_assignment_solution)

otherwise it will be transparent or white to basically have a non

4:46

S… Speaker 1 (45_assignment_solution)

-blue background here.

4:47

S… Speaker 1 (45_assignment_solution)

LogItem of course is a number so this check should be easy and

4:51

S… Speaker 1 (45_assignment_solution)

yes you could outsource this part of course into a method you call here

4:56

S… Speaker 1 (45_assignment_solution)

generally having most of the logic in the TypeScript code in

5:00

S… Speaker 1 (45_assignment_solution)

the body of your component is a good practice but here I think it's also

5:04

S… Speaker 1 (45_assignment_solution)

okay to put it into the template and show that this is possible too.

5:08

S… Speaker 1 (45_assignment_solution)

With this check now in place,

5:11

S… Speaker 1 (45_assignment_solution)

let's see if it works as expected.

5:13

S… Speaker 1 (45_assignment_solution)

If I click this button,

5:15

S… Speaker 1 (45_assignment_solution)

the next item should have a blue background.

5:18

S… Speaker 1 (45_assignment_solution)

And it does.

5:20

S… Speaker 1 (45_assignment_solution)

So that's working,

5:22

S… Speaker 1 (45_assignment_solution)

but pretty hard to read,

5:23

S… Speaker 1 (45_assignment_solution)

right?

5:24

S… Speaker 1 (45_assignment_solution)

So let's finish the second part here and give it a white color.

5:28

S… Speaker 2 (45_assignment_solution)

For this,

5:29

S… Speaker 1 (45_assignment_solution)

in my CSS file,

5:31

S… Speaker 1 (45_assignment_solution)

I will define a white text.

5:34

S… Speaker 1 (45_assignment_solution)

Class name,

5:35

S… Speaker 1 (45_assignment_solution)

any name you like,

5:36

S… Speaker 1 (45_assignment_solution)

of course, that's totally up to you.

5:38

S… Speaker 1 (45_assignment_solution)

And I will set the color to white.

5:40

S… Speaker 1 (45_assignment_solution)

Now this white text CSS class should only be attached

5:45

S… Speaker 1 (45_assignment_solution)

if we are at element 5 or higher.

5:48

S… Speaker 1 (45_assignment_solution)

So next to ng -style,

5:50

S… Speaker 1 (45_assignment_solution)

I will also add ng -class and I will use property binding,

5:54

S… Speaker 1 (45_assignment_solution)

so square brackets,

5:55

S… Speaker 1 (45_assignment_solution)

here too.

5:56

S… Speaker 1 (45_assignment_solution)

Because I need to pass a JavaScript object to the ng -class property

6:00

S… Speaker 1 (45_assignment_solution)

on the ng -class directive.

6:03

S… Speaker 2 (45_assignment_solution)

to have it work correctly,

6:04

S… Speaker 1 (45_assignment_solution)

because this directive needs to know which classes should be attached when.

6:08

S… Speaker 2 (45_assignment_solution)

Well,

6:10

S… Speaker 1 (45_assignment_solution)

between single quotation marks,

6:11

S… Speaker 1 (45_assignment_solution)

since we have a dash inside the name,

6:14

S… Speaker 1 (45_assignment_solution)

I'll add the white text class,

6:16

S… Speaker 1 (45_assignment_solution)

the class we just created here,

6:18

S… Speaker 1 (45_assignment_solution)

only if the condition specified

6:22

S… Speaker 1 (45_assignment_solution)

here as a value returns true.

6:25

S… Speaker 1 (45_assignment_solution)

And the condition simply is logItem greater or equal than 5,

6:29

S… Speaker 1 (45_assignment_solution)

just like on the ngStyle directive.

6:32

S… Speaker 1 (45_assignment_solution)

So if this returns true,

6:34

S… Speaker 1 (45_assignment_solution)

we should have the white text class attached,

6:36

S… Speaker 1 (45_assignment_solution)

which should turn the text white.

6:38

S… Speaker 1 (45_assignment_solution)

Let's see if it works.

6:39

S… Speaker 1 (45_assignment_solution)

I'll click display details.

6:41

S… Speaker 1 (45_assignment_solution)

So here the text clearly is not white.

6:44

S… Speaker 1 (45_assignment_solution)

That is working.

6:45

S… Speaker 1 (45_assignment_solution)

And now,

6:46

S… Speaker 1 (45_assignment_solution)

looks good,

6:48

S… Speaker 2 (45_assignment_solution)

blue background,

6:49

S… Speaker 1 (45_assignment_solution)

white text.

6:50

S… Speaker 2 (45_assignment_solution)

Awesome.

6:51

S… Speaker 1 (45_assignment_solution)

Now I will show a nice bonus to the solution in the

6:55

S… Speaker 1 (45_assignment_solution)

next lecture actually,

6:56

S… Speaker 1 (45_assignment_solution)

where I will use timestamps because it uses an

7:00

S… Speaker 1 (45_assignment_solution)

extra addition of ng4 we haven't seen before.

45_assignment_solution

Shrnutí

Zeptejte se UI na tento transcript