96. Creating a Basic Attribute Directive

Jul 15, 2026 01:02 · 6:42 · English · Whisper Turbo · 2 Speakers
Henda útgávan er útgivin í dag. Uppgradering til permanent lagring →
Lærarabókin
Showing only
0:02
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So we already use attribute directives like ng -class and ng -style.
0:05
S… Speaker 1 (96. Creating a Basic Attribute Directive)
It's even easier to understand what they do once we've built our own one.
0:09
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So I want to build a directive which simply highlights the element
0:14
S… Speaker 1 (96. Creating a Basic Attribute Directive)
I hover over,
0:15
S… Speaker 1 (96. Creating a Basic Attribute Directive)
let's say.
0:15
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Of course, I could achieve the same with normal CSS styles,
0:18
S… Speaker 1 (96. Creating a Basic Attribute Directive)
but this is just a good demo.
0:20
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So I will create a new folder,
0:22
S… Speaker 1 (96. Creating a Basic Attribute Directive)
and I will name it basic highlight,
0:25
S… Speaker 1 (96. Creating a Basic Attribute Directive)
like this,
0:27
S… Speaker 1 (96. Creating a Basic Attribute Directive)
because in there I create a new file,
0:29
S… Speaker 1 (96. Creating a Basic Attribute Directive)
basic highlight.
0:31
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And now directive .ts.
0:34
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So before we always had component files.
0:36
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now this is a new element.
0:38
S… Speaker 1 (96. Creating a Basic Attribute Directive)
It's not a component.
0:39
S… Speaker 1 (96. Creating a Basic Attribute Directive)
It will be a directive,
0:41
S… Speaker 1 (96. Creating a Basic Attribute Directive)
hence the file name.
0:42
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now in this file,
0:44
S… Speaker 2 (96. Creating a Basic Attribute Directive)
I'll export a class,
0:46
S… Speaker 1 (96. Creating a Basic Attribute Directive)
which will name basic highlight.
0:51
S… Speaker 1 (96. Creating a Basic Attribute Directive)
directive again to be descriptive about what this class is and
0:56
S… Speaker 1 (96. Creating a Basic Attribute Directive)
to make it a directive just like with a component where we added add component
1:00
S… Speaker 1 (96. Creating a Basic Attribute Directive)
here we have to add add directive and
1:04
S… Speaker 1 (96. Creating a Basic Attribute Directive)
directive needs to be imported from add angular core so
1:09
S… Speaker 1 (96. Creating a Basic Attribute Directive)
make sure to add this import and we need to pass an object to
1:13
S… Speaker 1 (96. Creating a Basic Attribute Directive)
this decorator to configure this directive now how do we configure a directive
1:18
S… Speaker 1 (96. Creating a Basic Attribute Directive)
The one thing our directive absolutely needs is a
1:22
S… Speaker 2 (96. Creating a Basic Attribute Directive)
selector.
1:22
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Because remember,
1:23
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we do place directives in our template to attach them to elements.
1:27
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So we need to have some way to give Angular that instruction.
1:32
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And that is the selector.
1:33
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Here,
1:34
S… Speaker 1 (96. Creating a Basic Attribute Directive)
that should also be a unique selector.
1:37
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So typically here you use a camel case notation to
1:42
S… Speaker 1 (96. Creating a Basic Attribute Directive)
give it app highlight as a selector or here maybe
1:46
S… Speaker 1 (96. Creating a Basic Attribute Directive)
app basic highlight like this.
1:50
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now that would select it by element.
1:52
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now I want to have this attribute style.
1:55
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So I'm going to wrap this in square brackets,
1:58
S… Speaker 1 (96. Creating a Basic Attribute Directive)
which means this will now be recognized whenever I add
2:02
S… Speaker 1 (96. Creating a Basic Attribute Directive)
app basic highlight without square brackets to an element.
2:06
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now to show this we need to do something which gives us some visual glue
2:10
S… Speaker 1 (96. Creating a Basic Attribute Directive)
that this is working So the basic thing is the most
2:14
S… Speaker 1 (96. Creating a Basic Attribute Directive)
basic use cases we change Let's say the background color of the element where
2:19
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we attach this directive
2:21
S… Speaker 2 (96. Creating a Basic Attribute Directive)
For this,
2:22
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we need to get access to the element the directive sits on.
2:24
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And the cool thing is Angular gives us this access.
2:28
S… Speaker 1 (96. Creating a Basic Attribute Directive)
We can inject the element the directive sits on into
2:32
S… Speaker 1 (96. Creating a Basic Attribute Directive)
this directive.
2:33
S… Speaker 1 (96. Creating a Basic Attribute Directive)
An injection is something we'll take a closer look at in the next
2:37
S… Speaker 1 (96. Creating a Basic Attribute Directive)
course module,
2:38
S… Speaker 1 (96. Creating a Basic Attribute Directive)
in the big next course module,
2:40
S… Speaker 2 (96. Creating a Basic Attribute Directive)
which is about services.
2:41
S… Speaker 1 (96. Creating a Basic Attribute Directive)
I can't say that much.
2:43
S… Speaker 1 (96. Creating a Basic Attribute Directive)
It basically is an easy way to get access to some other classes without
2:48
S… Speaker 1 (96. Creating a Basic Attribute Directive)
having them to instantiate on our own.
2:51
S… Speaker 1 (96. Creating a Basic Attribute Directive)
We do and check by adding the constructor,
2:53
S… Speaker 1 (96. Creating a Basic Attribute Directive)
which every TypeScript class has.
2:55
S… Speaker 1 (96. Creating a Basic Attribute Directive)
We don't need to write anything in the constructor body for now,
2:58
S… Speaker 1 (96. Creating a Basic Attribute Directive)
but here...
3:00
S… Speaker 1 (96. Creating a Basic Attribute Directive)
On the list of arguments,
3:02
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we list a couple of arguments you want to get whenever an instance of
3:06
S… Speaker 1 (96. Creating a Basic Attribute Directive)
this class here is created.
3:08
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And of course,
3:08
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Angular is responsible for creating these instances.
3:11
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So therefore,
3:12
S… Speaker 1 (96. Creating a Basic Attribute Directive)
if we tell it to please give us a specific type of
3:16
S… Speaker 1 (96. Creating a Basic Attribute Directive)
argument, this is what injection is.
3:18
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Angular will try to create this thing we need and
3:22
S… Speaker 2 (96. Creating a Basic Attribute Directive)
give it to us.
3:24
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Well, this thing we need,
3:26
S… Speaker 1 (96. Creating a Basic Attribute Directive)
in this case,
3:27
S… Speaker 1 (96. Creating a Basic Attribute Directive)
simply is a reference to the element the directive was placed
3:31
S… Speaker 1 (96. Creating a Basic Attribute Directive)
on. So,
3:32
S… Speaker 1 (96. Creating a Basic Attribute Directive)
an element ref,
3:33
S… Speaker 1 (96. Creating a Basic Attribute Directive)
and this name is totally up to you,
3:35
S… Speaker 1 (96. Creating a Basic Attribute Directive)
but the type is important.
3:36
S… Speaker 1 (96. Creating a Basic Attribute Directive)
The type has to be element ref.
3:39
S… Speaker 1 (96. Creating a Basic Attribute Directive)
You might recognize this from at viewchild.
3:42
S… Speaker 1 (96. Creating a Basic Attribute Directive)
There,
3:43
S… Speaker 1 (96. Creating a Basic Attribute Directive)
it also was a reference to some element.
3:45
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Here it is too.
3:47
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now, to be able to use this data in our class
3:51
S… Speaker 1 (96. Creating a Basic Attribute Directive)
here, everywhere in the class,
3:53
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we can use a TypeScript shortcut of adding private in front of it,
3:57
S… Speaker 1 (96. Creating a Basic Attribute Directive)
which will make this both a property of this
4:01
S… Speaker 1 (96. Creating a Basic Attribute Directive)
class, so property element ref,
4:03
S… Speaker 1 (96. Creating a Basic Attribute Directive)
and automatically assign this value,
4:05
S… Speaker 1 (96. Creating a Basic Attribute Directive)
so this instance we're getting,
4:07
S… Speaker 1 (96. Creating a Basic Attribute Directive)
to this property.
4:08
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now,
4:09
S… Speaker 2 (96. Creating a Basic Attribute Directive)
with that,
4:10
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we got access to the element.
4:11
S… Speaker 2 (96. Creating a Basic Attribute Directive)
Now,
4:12
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we can use it here in our constructor,
4:14
S… Speaker 2 (96. Creating a Basic Attribute Directive)
for example,
4:14
S… Speaker 1 (96. Creating a Basic Attribute Directive)
access the native element,
4:17
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And then do something with it.
4:18
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Though a better place than the constructor is onInit.
4:23
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And just like the component,
4:26
S… Speaker 1 (96. Creating a Basic Attribute Directive)
the directive also has the ngOnInit lifecycle hook.
4:30
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So here I can therefore add ngOnInit.
4:34
S… Speaker 2 (96. Creating a Basic Attribute Directive)
And in there,
4:36
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we could access elementRef.
4:38
S… Speaker 1 (96. Creating a Basic Attribute Directive)
That's the shortcut which automatically gave me this property.
4:41
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Access the native element.
4:42
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And there access the style.
4:45
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And maybe...
4:47
S… Speaker 1 (96. Creating a Basic Attribute Directive)
the background color and set this equal to
4:51
S… Speaker 1 (96. Creating a Basic Attribute Directive)
green so that we can see something changed.
4:53
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So what we're doing here is we're getting access to the element the directive was
4:57
S… Speaker 2 (96. Creating a Basic Attribute Directive)
placed on,
4:57
S… Speaker 1 (96. Creating a Basic Attribute Directive)
getting access to that exact element,
5:00
S… Speaker 1 (96. Creating a Basic Attribute Directive)
and then we're overwriting the style of this element.
5:02
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now let's use this directive.
5:04
S… Speaker 2 (96. Creating a Basic Attribute Directive)
To use it,
5:05
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we have to do two things.
5:07
S… Speaker 2 (96. Creating a Basic Attribute Directive)
First of all,
5:08
S… Speaker 1 (96. Creating a Basic Attribute Directive)
like for a component,
5:09
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we have to inform Angular that we have a new directive.
5:13
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Just like with components,
5:15
S… Speaker 1 (96. Creating a Basic Attribute Directive)
it doesn't scan all our files,
5:17
S… Speaker 1 (96. Creating a Basic Attribute Directive)
so it doesn't know.
5:18
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So we have to go to app module and here in declarations,
5:22
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we have to add our basic highlight
5:26
S… Speaker 1 (96. Creating a Basic Attribute Directive)
directive and also add the import pointing to
5:31
S… Speaker 1 (96. Creating a Basic Attribute Directive)
the basic highlight folder and there to the basic highlight directive file.
5:35
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now with this,
5:36
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we can use the directive in our app since we informed Angular.
5:39
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now let's use it in our app component HTML file.
5:43
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And here below all our lists,
5:46
S… Speaker 1 (96. Creating a Basic Attribute Directive)
I will simply add a new paragraph,
5:48
S… Speaker 1 (96. Creating a Basic Attribute Directive)
style me with basic directive,
5:52
S… Speaker 1 (96. Creating a Basic Attribute Directive)
something like that.
5:54
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And now to this paragraph,
5:55
S… Speaker 1 (96. Creating a Basic Attribute Directive)
I can add app basic highlight,
5:57
S… Speaker 1 (96. Creating a Basic Attribute Directive)
my own selector.
5:58
S… Speaker 1 (96. Creating a Basic Attribute Directive)
We don't need to set any value.
6:00
S… Speaker 2 (96. Creating a Basic Attribute Directive)
And importantly,
6:01
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we don't use square brackets because as I already emphasized,
6:05
S… Speaker 1 (96. Creating a Basic Attribute Directive)
the directive name is just a selector we set
6:10
S… Speaker 1 (96. Creating a Basic Attribute Directive)
up here.
6:10
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And the square brackets here are not part of the name.
6:13
S… Speaker 1 (96. Creating a Basic Attribute Directive)
It's part of this selector style telling Angular,
6:16
S… Speaker 1 (96. Creating a Basic Attribute Directive)
please select it as an attribute on an element.
6:20
S… Speaker 1 (96. Creating a Basic Attribute Directive)
And that's just how we add it here.
6:22
S… Speaker 1 (96. Creating a Basic Attribute Directive)
like an attribute of the paragraph.
6:24
S… Speaker 1 (96. Creating a Basic Attribute Directive)
Now with that,
6:25
S… Speaker 1 (96. Creating a Basic Attribute Directive)
if we save this,
6:26
S… Speaker 1 (96. Creating a Basic Attribute Directive)
we indeed see a green paragraph below our list
6:31
S… Speaker 1 (96. Creating a Basic Attribute Directive)
because our directive is doing its job here,
6:34
S… Speaker 1 (96. Creating a Basic Attribute Directive)
it's styling it.
6:35
S… Speaker 1 (96. Creating a Basic Attribute Directive)
So that's our first basic attribute directive.
6:37
S… Speaker 1 (96. Creating a Basic Attribute Directive)
We can enhance this though.

This transcript was generated by AI (automatic speech recognition). May contain errors - check against the original audio for critical use. Politikkur

❤️ Love STT.ai? Tell your friends!
Samandráttur
Click Summarize to generate an AI summary of this transcript.
Summating...
Spørg AI um hetta transkriptión
Tað er ein spurningur um, hvussu nógvar ferðir ein kann skriva og lesa.
Transcribe otro