Build Web Apps with Angular 2

Build Web Apps with Angular 2 Built-in & Structural Directives


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Built-in & Structural Directives" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott runs through a few of the built-in attribute directives like ngClass and ngStyle. He also covers structural directives like ngFor, ngIf, and ngSwitch. After looking at these built-in Angular 2 directives, Scott shares one more attribute directive example before introducing the next challenge.

Get Unlimited Access Now

Transcript from the "Built-in & Structural Directives" Lesson

>> [MUSIC]

>> Scott Moss: So, now we'll talk about some of the built-in attribute directives. Let's go, let's go here and we can play with some of them. So, some of the built-in ones include, we have like ngClass,
>> Scott Moss: Which does the exact same thing as the one on angle one did.

[00:00:26] It conditionally will apply a CSS class based on some condition. We have NG Style, which again will take an object and apply style to an element. Nothing fancy. There's some other ones that are interesting.
>> Scott Moss: Let me see, ngStyle, no this might-
>> Speaker 2: Maybe-
>> Scott Moss: What's wrong?
>> Speaker 2: It's hidden.

>> Scott Moss: Hidden?
>> Speaker 2: Yeah.
>> Scott Moss: Well you can bind to the hidden Hidden properties-
>> Speaker 2: Right.
>> Scott Moss: Yeah, like that because that's a property. So, probably not. So, I guess that's a good segue to go into, now, talk about the structural directives, which are the more powerful directives, the ones that we use, and take advantage of the template syntax.

[00:01:09] So, some of those include, and you've been using one pretty much this whole time, NG4. So, NG4 is a structural directive it pretty much just uses the template. Syntax from the shadow dom and all it does is just replace that template with an empty script tag, that's all it does.

[00:01:27] So, it actually removes it from the dom and replaces it with an empty script tag. So, what we're going to do is we're going to, actually that's going to be an exercise for you guys. So, let's just walk through how N G F works, some of the other ones like N G switch and stuff like that so we can get a handle on it.

[00:01:44] So, for instance, let's change some of the stuff around, let's go to
>> Scott Moss: Let's go to items, see what's going on in here.
>> Scott Moss: So, we'll just add another button down here, let's do that. That's a nice, fancy CSS.
>> Scott Moss: So, on click
>> Scott Moss: we'll just toggle something.

[00:02:19] We'll say, show equals not show. Let's do that. So, now inside of this component,
>> Speaker 3: Probably want to get some text in your book.
>> Scott Moss: Yeah.
>> Scott Moss: Toggle show. Then I will put some text down there.
>> Scott Moss: So, you noticed most structural directives start with the star. That's actually the shortcut syntax.

[00:03:08] This asterisk, or the star, like we talked about yesterday, is really just a shortcut for the template syntax which will look like this. And, we could actually just convert it to this anyway, so it's really just Show here. It would actually look like this.
>> Scott Moss: That's the equivalent.

>> Scott Moss: So, that's all this is doing. So, you don't have to write it all the time. And, only structural directives can do this. So, when you see that, you know that It's changing the HTML somewhere, it's changing the content. You could think of it if you ever got deep into Angular 1 directives, it was where you did tricky things in the compile phase from the directive before the link.

[00:03:53] Is there still something like priority so if you hit two of those on the edge run you can tell which one is going to hit first? I don't know how they handle priorities, the story there. I don't think this it is well documented yet, but I'm sure they have to have some type of system setup for priorities.

[00:04:10] How you would handle that, I am not sure. I will figure that out for you because that's interesting. All right, so let's check it out.
>> Scott Moss: Items, toggle show. All right, so I click it. All I'm doing is saying show equals not show. So, this is doing an inverse every single time I click it.

[00:04:46] So that's NGF and if we inspect the dom, if we look at this, yes?
>> Speaker 4: I was just going to say that I noticed that the, that when you click the button, it's actually firing the click event on the parent dev.
>> Scott Moss: It is, so if you want to get around that, then what we would have to do is we would have to make an actual statement here that executes.

[00:05:07] So, let's say toggle by the pass in the event.
>> Scott Moss: And then, down here, toggle grab the event.
>> Scott Moss: Let's continue to do what we were doing before.
>> Scott Moss: But, then you also want to do event.stopPropagation to stop it from bubbling up.
>> Scott Moss: Any questions on NGF? So, very similar to like NG4, they pretty much work the same way as far as, you can expect them to completely change how the DOM templates are going to be rendered.

[00:06:06] And, let's actually, I think it's valuable to look at the DOM here while this stuff is being toggled to see what's going on. So let's do that. Get over there.
>> Scott Moss: So, if we look right here, there's this comment here, we have the H1's totally in there. And then, when we click it, it actually removes it.

[00:06:24] This is important because in Angular 1, they have NG low, NG high. NG high just hid it with CSS, but it was still in the DOM, which people's like no that's performing and stuff. But, actually if it's leaving like all these events and stuff around, it's using up resources that could be used elsewhere, if I change detection and what-not.

[00:06:44] But, also on the flip-side, if you remove it like NG If does, then it's really expensive initializing the component. So, what they did was, when the component NG If is smart enough to keep the component state, or that element's state. So, when it comes back it doesn't have to reinitialize, so it's not that expensive.

[00:07:02] So, it's the best of both worlds. So, that's what NG If does now, whereas it didn't before. So, it's pretty cool. Any questions on that? Alright, so I do have one more example I could go through to show you, to solidify your understanding of attribute directives, I could totally do that.

[00:07:27] If you need it, yeah you need it. Let's do it. [LAUGH] What am I saying. Of course. Let's make another one. Actually, I kind of made one, let's just go through it. So, I made the spinner one. This directive just spins when you hover over it. So, let's just walk through why this is happening here.

[00:07:47] It's very similar to the one we just made. It's a directive, has a selector spinner, mouse over mouse out on the host, just run the same method. And, all that method does is just set the style. So, its a transform with an ease in, and then it just rotates on an increasing degree.

[00:08:10] That's it. We'll walk through this, and then we'll enhance it and maybe we'll talk about some more stuff. So, let's see how that happens, how that stuff works. I have it here. I'm going to go back to app. Then, I think I already have it in app. Here to, let's see, yeah, yep it's right there.

[00:08:30] So, let's take a look at that. It's this red square right here, so hover over this. Ten degrees out ten degrees, ten degrees, ten degrees. And you can see it will keep going. Forever.
>> Scott Moss: So, as you see directives are very, very powerful. Very, very simple to their component children because they don't have templates, which actually just simplifies it a lot.

[00:08:56] But, again when you get into custom structural components or directors, they get pretty complicated. There's alot of internal things that you have to use to manipulate the dial.
>> Scott Moss: So, any questions on this stuff?
>> Speaker 5: There was one here.
>> Scott Moss: Yes.
>> Speaker 5: One second let me find it.

[00:09:25] How can I get a toggle button trigger for a particular element? And not for all of the boxes.
>> Scott Moss: How can I get a toggle-
>> Speaker 5: Button trigger for a particular element.
>> Scott Moss: For a particular element,
>> Scott Moss: and not for all the boxes. Let me try to understand.

[00:09:46] So, they only want, I'm guessing what they're asking is, instead of having all of these toggles sharing the same state, they only want it to show on one?
>> Speaker 5: Yeah, or maybe just any element.
>> Scott Moss: Okay, well it looks like I'm doing this inside of an items list that's repeating over, yeah.

[00:10:02] So, NG4, so it's going to do it for all of them because it's sharing the same state. Because this shows, this model, the show bullion is just one. It's not one for every instance. So, you would just have to make sure that you're just not sharing the same state like I am.

[00:10:16] So, maybe have that instance be inside the, where is it at?.
>> Speaker 4: In the details.
>> Scott Moss: Right. Have it there instead of here. Because it's just sharing the same one and that's pretty much it. Another way you can do is you could have it to where you click and it passes in the active items ID, and only the ID gets to show.

[00:10:37] I mean, there's a lot of ways you can do it.