96. Creating a Basic Attribute Directive

Jul 15, 2026 01:02 · 6:42 · English · Whisper Turbo · 2 స్పీకర్లు
ఈ సరికొత్త కాలం అయిపొయినది. శాశ్వత నిల్వ కోసం ఉన్నతీకరించు →
లాగ్మెట్ సూచికComment
చూపుట మాత్రమే
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.

ఈ అపోహింగ్‌ను (స్వయంలేని పద గుర్తింపు) సంప్రదాయం (ఆఫ్యుటికల్ ప్రసంగ గుర్తింపు) రూపొందించారు. దోషములు వుండు. ఫార్మేట్‌ను సంక్లిష్టమైన ఆడియోకు వ్యతిరేకంగా నిర్ధారించండి. AI విధానము

❤️ ప్రేమ STT.ai? మీ స్నేహితులకు చెప్పండి!
సారాంశం
ఈ పిక్సెస్ యొక్క యాక్సెస్‌బిలిటి సంగ్రహం ఉద్భవించుటకు కాంక్వెరర్‌ను నొక్కుము.
పరిగణనలోకి...
ఈ రిపోర్టు గురించి AI ను అడుగుము
ఈ అస్థికల పేటిక గురించి ఏమైనా అడగండి —⁠ ఏ.
మరొకరు రాసుకోండి