41_styling_elements_dynamically_with_ngstyle

0:02

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

In the last lecture,

0:03

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

we saw ngif,

0:04

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

super useful directive,

0:06

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and ngif was a structural directive.

0:09

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

The other type of directives are attribute directives,

0:13

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

which are called like this because they really just look like normal HTML attributes

0:18

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

without a star,

0:19

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

basically.

0:19

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Let's add one.

0:21

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

On the server component here,

0:23

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

we output the server status,

0:25

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

right? And the server status always is offline.

0:28

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Let's mix this up.

0:30

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Let's say we want to dynamically create this.

0:33

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So I'll add the constructor,

0:35

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

which is just a built -in method each TypeScript class has,

0:40

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

which is called once this component is created.

0:42

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And here I will set the server status to a random

0:46

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

value.

0:47

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

I will use the math random function.

0:50

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And this gives us a random number between 0 and 1.

0:53

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

floating point number and if this is greater than 0 .5

0:58

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

I want to set the status to online otherwise I

1:02

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

will set it to offline.

1:03

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So with that we shouldn't get the same status all the time.

1:08

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And now let's check this.

1:10

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

We see indeed online and offline.

1:12

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

That's lucky.

1:13

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Could have, of course,

1:14

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

also been both offline since we have a 50 % chance.

1:17

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Now we have two different statuses here.

1:19

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And now let's say we want to change the background

1:24

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

color of this component depending on the server status.

1:29

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

For this,

1:30

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

we can use another directive.

1:32

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

On this wrapping paragraph here,

1:34

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

I can add it and it's called ng -style.

1:39

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Now that's a built -in directive.

1:41

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

You can recognize this on the ng at the beginning.

1:45

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And ng -style,

1:46

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

that's the directive,

1:47

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

is pretty useless like this.

1:49

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

We need to give it some configuration to do something.

1:53

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

That is why we will use property binding on this directive.

1:57

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And it's super important to understand that these squared brackets here are

2:01

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

not part of the directive name.

2:03

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

The directive name is just ng -style.

2:06

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

The squared brackets indicate that we want to bind to some property

2:10

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

on this directive.

2:11

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And this...

2:13

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

property name happens to also be Angie style.

2:17

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

We will see this in practice on our own directives in

2:21

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

the directive section later.

2:22

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

But super important to understand that property binding is not the same as a directive.

2:26

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

It's totally different.

2:27

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

We are binding to a property of the directive.

2:31

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

This ng -style property expects to get

2:35

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

a JavaScript object.

2:36

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And here we define key value pairs of the style

2:40

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

name as the key and the value of the style as the value.

2:45

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So for example,

2:46

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

we could find background color,

2:48

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and if you want to use this notation with the dash,

2:51

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

you have to wrap it in single quotation marks to make it a valid JavaScript

2:55

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

property name.

2:56

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Or you use the camel case notation background color

3:00

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

like this.

3:01

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And then you could set this to red.

3:04

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

But I don't want to set it to red.

3:06

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

I want to set it to something depending on the server status.

3:09

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So here,

3:10

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

we could simply call a method

3:14

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Get color.

3:15

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So that is really mixing now all the things and

3:19

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

make it clear that between the quotation marks we are executing types with

3:23

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

code here.

3:24

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So therefore we can of course call a method.

3:26

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

Now get color is a method we can add here.

3:30

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And get color should now let's say return green if

3:35

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

the status is online and red otherwise.

3:37

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So I will return something.

3:41

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

First I check the server status,

3:42

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

so this server status,

3:44

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and if this is equal to online,

3:47

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

using a ternary expression here,

3:49

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

I will return green,

3:52

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

otherwise I will return red.

3:56

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So getColor will return green or red,

4:00

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and this is then assigned as the background color with ngStyle.

4:04

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

If we now save this,

4:05

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

let's have a look at the result.

4:08

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

We see indeed the running server has a green background

4:12

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and the offline server has a red one.

4:15

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So that is working.

4:16

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

ng -style allows us to dynamically update that.

4:20

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

If I reload,

4:21

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

you see now both are offline,

4:23

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

so both are red now.

4:25

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And that is the big advantage of ng -style.

4:27

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

It allows you to dynamically update the styles.

4:30

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

And of course,

4:31

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

if the server status here did change over time,

4:35

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

it would update the styling respectively.

4:38

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So this binding we set up here still

4:42

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

is working.

4:43

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

If the service status here,

4:46

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

which is responsible for choosing the right color,

4:49

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

changes, it updates the style.

4:51

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

So that's ng -style,

4:52

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

an attribute directive,

4:54

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

added like an attribute,

4:55

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

and in this case,

4:56

S… Speaker 1 (41_styling_elements_dynamically_with_ngstyle)

also using property binding to configure it.

41_styling_elements_dynamically_with_ngstyle

Crynodeb

Gofyn i AI Am Y Trawssgrifiad Yma