This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Attribute Directives" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: What is a directive? A directive is really just a class. We actually have three types of directives. You already know one. You've used it so many times already that's a component. A component is a directive with a template that's it. We also have attribute directives, which we also use to, attribute directives are like directives that change the host component or the host element that it's on.
[00:00:28] So the style, behavior, things like that. So, ngClass would be one, ngStyle would be actually a directive. A structural directive actually changes the component or the host element's structure, it's HTML content. So NG4, ng-switch, things like that, NGIf, those are all structural directives because they change how the element is rendered into the DOM.
[00:00:54] So there are tons of built in attribute and structural directives, but we can also, of course, make our own. And then we'll talk about how to access the DOM and do things you would normally do in jQuery.
>> Scott: So a directive is responsible for modifying a dynamic template.
[00:01:13] A component is a specific kind of directive, we talked about this.
>> Scott: So we're gonna breeze past these right here because I think its better if I just get into the code and show you this stuff, so don't worry about this stuff. So we're gonna talk about structural and attribute directives.
[00:01:33] We're gonna create a directive, and then we're gonna create a structural directive. So we're just gonna do that. I'd rather just do that live than this is what this is, cuz it's yeah. So when we do create these directives the way the accessing the DOM is using the ElementRef.
[00:01:52] The ElementRef is exactly what it sounds like. It is a reference to element that the directive is hosted on, so we will use that to get access to it and that object has a property called a native element which gives us the native element. So that is how we would do things.
[00:02:08] So that pretty much takes you back to Angular 1, where you had the element object that was in the link function and the compile function and what not. And you can do things there. That's what it's getting to.
>> Scott: So here's an example of how you would access the DOM inside of a attribute directive here.
[00:02:29] It's a blink tag.
>> Speaker 2: Bring it back.
>> Scott: So we're gonna get into this a little more. Okay, any questions? I just wanted to get right into it. So if you have any questions so far? Otherwise, I just want to get into it. Wanna see me mess up.
[00:02:51] All right, so let's do it. So first, what we're gonna do is, we'll make some basic attribute directives, then I'll show you some of the built in ones, and then we'll talk about some structural directives, and then I'll set you guys off on exercises. Cool? All right, so let's just make a basic attribute directive, let's just make one, I'm gonna call it what's a cool one?
[00:03:26] Color. What'd you call it?
>> Scott: [LAUGH] All right.
>> Speaker 3: Got a K
>> Scott: Sorry, there we go. There you go.
>> Speaker 4: [LAUGH]
>> Scott: Yeah.
>> Speaker 2: Wait no, did you mean like MARQ?
>> Speaker 4: Yeah
>> Scott: Like a marquee.
>> Speaker 2: What you gotta do is you gotta grab all of the elements in the component and bunch them together.
[00:03:54] So it's marquee and the funky bunch. [LAUGH] Boom.
>> Scott: Let's just do that-
>> Speaker 2: I'll give $5 if you can do that.
>> Speaker 5: [LAUGH]
>> Scott: Next time. We'll just make a color one that just changes the color of text when you hover over it initially. So the first thing we need to do is import our dependencies, our modules here.
[00:04:24] So, that's going to include stuff from Angular 2, of course. So, we have the directive that we have. I´ve been using before and that´s all we need for now. So, now all we have to say is it is the directive,
>> Scott: or am I get the fancy or I got to save it first.
[00:04:50] There we go. I say it is not highlight. So we use the directive. Decorator here instead of component. And again, component is just a type of directive. But this is like the foundation of it. So like a component, we can give it a selector. In this case the selector is an attribute so I'm gonna use the CSS attribute selector similar which is the square brackets.
[00:05:12] And I'm gonna say it's attribute is gonna be Colorer. What's a better name?
>> Speaker 2: That's perfect, just go with it.
>> Scott: [LAUGH] Let's do it, colorer.
>> Speaker 2: It sounds like something somebody would release.
>> Scott: Yeah, colorer more. All right. So we got color and that's pretty much all we're going to need now for that directive.
[00:05:38] And then what we're going to do is we're going to just export this
>> Scott: Colorer, cool. So we'll have that, and then we need to access the dom. So what we'll do is, we need to import the element ref. We'll come down here in our constructor.
>> Scott: And I'll just call this o.
[00:06:11] Let's go to the ElementRef. So now we have that.
>> Scott: And then just right off the bat I'll just go ahead and say _el.nativeElement. So now we have the native dom element here, which means I can access the style property and get the color property on that. And I'll just say red.
[00:06:43] And so it changed the color to red or whatever listing is hosted on. So now let's use this thing. So let's just inject it into the app. So now we're gonna app and we just need to add it to the directives. So we'll say colorer which also means we need to import it.
[00:07:13]
>> Scott: No, is that not right?
>> Scott: I called it color, okay.
>> Scott: So now we imported it so now we can actually use it. So what we need to do is just go, now because it's at the app level component, that means every child component and including app now has access to our directory that we just made cuz it's at the top of the tree.
[00:07:38] So we'll just go ahead and go to app.html we'll use it here. Let's find a piece of text.
>> Scott: Let's add it here to the span. So now we can say,
>> Scott: Colorer. Like that, just like you would any attribute. So, let's check it out.
>> Scott: There it is.
[00:08:03] So, it's red.
>> Scott: All right? Any questions on that? So that's a basic attribute directive. Let's just review that for one second. Pretty simple here. Directive, annotation, a selector access to the native element and then just dial it.