97. Using the Renderer to build a Better Attribute Directive

0:02

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

In the last lecture,

0:03

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

we created our first basic directive.

0:05

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And it's doing its job,

0:06

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

we learned how to create a selector,

0:08

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

how to use that selector,

0:09

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

like an attribute in this case,

0:11

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

since we set up an attribute selector,

0:13

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

and how to register it in AppModule.

0:15

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We also learned how to get access to the element the directive sits on.

0:18

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

This,

0:19

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

however, is not the best way of changing that style.

0:22

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Because,

0:22

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

as you might recall from some earlier lecture in this course,

0:26

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

accessing elements directly like this is not a good practice.

0:30

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

You should use a different tool,

0:33

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which I'll show you in a second,

0:34

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

because Angular actually is also able to render

0:39

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

your templates without a DOM,

0:41

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

and then these properties might not be available.

0:44

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

It could do this when using service workers,

0:46

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

so basically some advanced use cases,

0:49

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

but nonetheless,

0:50

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

it's not a good practice to directly access your elements.

0:53

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

How should you access them then?

0:56

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Well, there is some other helper you can inject.

0:59

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

It's the renderer.

1:00

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So let's do this.

1:01

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

But actually,

1:03

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

let's not do it in our basic highlight directive.

1:05

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Let's create a new one.

1:07

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And for this,

1:08

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I will create a new one with the generate command or just G

1:12

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

as you learned with the CLI and then directive or

1:16

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

just D and then any name of your choice.

1:19

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And I'll name this better highlight.

1:25

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So this will give us a new file or two new files.

1:27

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I can delete the testing file.

1:29

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And we can also put this into its own folder,

1:32

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

of course.

1:32

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

It's not the default,

1:34

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

but let's do it here.

1:35

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

Better highlight.

1:37

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

You could also create a central shared or directives folder

1:41

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

where you store all your directives.

1:43

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

For now,

1:44

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

just for demo purposes and to have a clear separation and make this easy

1:48

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

to see, I'll put them into individual folders.

1:50

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So better highlight directive here.

1:53

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

in the app module i will need to adjust my path since i just moved it

1:57

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

to the better highlight folder

2:02

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

so make sure to point to the right path in the right file then in

2:07

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

there we got a selector app better highlight now inject

2:11

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

let's inject this better tool i was referring to it's

2:15

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

the renderer which is of type renderer

2:20

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

2.

2:21

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And this needs to be imported from at Angular slash core.

2:26

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now with this injected,

2:27

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

we can use it and I will use ngOnInit again to still stick

2:31

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

to this best practice of doing initialization work there.

2:34

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Make sure to import ngOnInit or just onInit here from

2:38

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

at AngularCore.

2:39

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And now let's implement ngOnInit here.

2:42

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And there I can now use the renderer.

2:44

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I do this by calling the property,

2:47

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which I created here,

2:48

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

private renderer.

2:50

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And there we get a couple of helper methods you can use to work with

2:54

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

the DOM basically.

2:55

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now, one important method I'm interested in here is the setStyle

2:59

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

method. This method allows us to,

3:01

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

guess what,

3:02

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

set the style of some element.

3:04

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now,

3:04

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

the problem here is for that,

3:06

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

we need to have the element for which we want to set the style.

3:09

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

And of course,

3:10

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

in Angular, there are different ways of getting such an element.

3:13

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Here in the directive,

3:14

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

it's exceptionally simple.

3:16

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We already saw how to get one in the basic directive,

3:19

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

the basic highlight directive.

3:20

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We can simply inject the element reference.

3:24

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So I'll add another private property here or argument,

3:27

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which will automatically be bound to a private property,

3:30

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I should say, which I'll name LREF.

3:32

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And this will be of type element ref,

3:36

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which we then also,

3:37

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

as before,

3:38

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

need to import here,

3:40

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

element ref from at Angular core.

3:44

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now, with this import added here,

3:47

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

now I can use this element ref here by calling this lref.

3:52

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And here I then want to access the native element.

3:55

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And that's important.

3:56

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We can't pass the reference itself.

3:59

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We need to get access to the underlying element and pass this as a first argument here to

4:03

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

setStyle.

4:04

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now setStyle takes a couple of other arguments.

4:06

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

We defined which element we want to style.

4:09

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now we have to define which style we want to set.

4:12

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And that would be the background color in our case.

4:15

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

With the style property defined,

4:17

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

the third argument we pass to the setStyle method is the value we want to assign

4:21

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

for this property.

4:23

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now we could set the background color here to blue.

4:25

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

The fourth and final argument is a flags object.

4:29

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

Here we can set a couple of flags for this style.

4:32

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And this is optional.

4:34

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I will leave it out here.

4:35

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

What you could set here are things like if you want to add an important

4:40

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

tag,

4:40

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

so this...

4:41

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

exclamation mark important annotation for a style to overwrite other styles or

4:46

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

something like that now this however does it for my cases

4:50

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

here and now if we save this with our better the highlight

4:54

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

directive already added to app module we can go to the app component and

4:58

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

add it here too

4:59

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I will simply duplicate this paragraph here and use app better

5:04

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

highlight here,

5:05

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

our new directive,

5:06

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

again,

5:07

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which is available through the selector since we also added it to the

5:11

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

app module.

5:12

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And then here I want to style this with a better directive.

5:17

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now, if we save this and let it recompile and reload the browser,

5:20

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

we already see the blue background here behind

5:24

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

this paragraph.

5:25

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So our new directive here,

5:27

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

the better directive is working.

5:29

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And now we're using the renderer,

5:31

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

which is a better approach of accessing the DOM.

5:34

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now,

5:35

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

why is it a better approach?

5:36

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Angular is not limited to running

5:41

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

in the browser here.

5:42

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

It, for example,

5:43

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

also works with service workers.

5:45

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And these are environments where you might not have access to the DOM.

5:49

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

So if you try to change the DOM as you did here in basic

5:53

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

highlight by directly accessing the native element and the style of this element,

5:57

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

you might get an error in some circumstances.

6:00

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Now, to be honest,

6:01

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

in most circumstances,

6:02

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

you probably don't.

6:03

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

And you probably also know if your app is going to run in the browser

6:08

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

or not.

6:08

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Still, it is a better practice to use the renderer for DOM access

6:12

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

and to use the methods the renderer provides to access the DOM.

6:16

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

You can learn more about the renderer in an article after this lecture

6:20

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

here if you're interested.

6:22

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Just another note,

6:23

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

I had to rerecord this part here because the renderer

6:28

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

type here changed from renderer v2 to just renderer 2,

6:31

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

as did some arguments you could pass to set style.

6:35

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Therefore,

6:36

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

in the other videos in this section,

6:38

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

you will see that this code looks slightly different.

6:40

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Not by much,

6:41

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

though.

6:42

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

Don't get confused by this.

6:43

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

The code you see here is the code you should use and the code which will work.

6:47

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

All the other code shown in the section,

6:49

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

of course, is not changed,

6:50

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

is still the same.

6:51

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

It's only this renderer set style method and the renderer type,

6:55

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

which is now renderer2 and not renderer v2,

6:58

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

as you will see in the other videos.

7:00

S… Speaker 1 (97. Using the Renderer to build a Better Attribute Directive)

With that,

7:01

S… Speaker 2 (97. Using the Renderer to build a Better Attribute Directive)

let's move on.

97. Using the Renderer to build a Better Attribute Directive

Sammanfattning

Fråga AI om detta Transcript