Angular 2 Tutorial [4] - Template Directives

Key Takeaways

Hey guys, in this video I'm going to show you how to use some of the built-in template directives, uh, ng if, ng switch, and ng4. All right, so what I have here is just a default quick start application. If you need to to get the quick start, you can get it from this GitHub page. You can download it or you can clone it. We cloned it in the second part of this series, so if you need to go back, you can do that. All right. So, we're going to just work in the the root app component that is uh included by default. And what we're going to do here is down in the class. Let's create a constructor. All right. And let's create a property. We'll say private. And we'll call this show heading. No, not that. What am I doing? All right. So, show heading. And then here we'll say this dot show heading. Set that to true. All right. And then up here in our template in the H1, we're going to use ng if. Now the syntax is a little different from Angular one. What you're going to want to do is use the asterisk and then say ng if and then set it to in this case show heading. All right. So, if we save that and we take a look, you can see that it's showing the heading. If I go down and I change this to false and save, now it's not. Okay. So, it's it's testing to see if show heading is true or false, which we're setting right here. All right. Very, very easy. So, next thing I want to show you is the switch statement. I'm just going to set that back to true. All right. So for the switch, what I'm going to do is let's create a property and we'll call it name. And then in here we'll say this.name equals John Doe. All right. Now up here in the template, what I'm going to do is use back ticks here so that we can use multiple lines. All right. And then let's see, we're going to put a span and we want to use our ng switch. Now, the ng switch is actually going to go in brackets. All right. And then we're going to set that equal to name. Now, inside of here, we're going to use more span tags. And this time, we're going to use an asterisk and say ng switch when and then let's set that. We're going to put single quotes inside the double quotes here because we're using a string. And let's say uh John Doe. All right. And then inside the span, we're going to say John Doe. Actually, let's just use first names. Say John there and there. And then down here, we'll just say John. All right. All right. And then I'm going to copy this. Okay. This one here we'll set to Sam. And this one we'll set to Jeff. All right. So, let's save that and run it. And you can see that we're getting John because what it's doing is it's checking name. All right. And it's saying when name equals John, then do this. spit out John. All right. So, if I go down here and I change this to Sam and save, now we get Sam. Now, what if we change to something that uh isn't even there. So, let's say Mike. All right. So, it's not showing Mike because that's not one of our cases. So, what we would usually do is use a default. All right. So, let's paste that in and then change this to switch default. And we can just get rid of this totally. And here, let's just say not here. Okay, we'll keep this set as Mike. And now you can see we're getting not here because it's it's default. It's not John, Sam, or Jeff. All right, so that's ng switch. The final one that I want to show you is ng4. And this is to uh to to create a loop. So what we'll do is create an array up here. Let's say private colors. And in here we'll say this dot colors equals red blue and green. Okay. So we have these colors and we want to output each one of these. So let's go up here and I'm going to put in a line break. Couple of them. And we're going to create an aul. And then we want to take the element that we want to repeat. So this is going to be an LI that we want to repeat. And then we're going to say asterisk ng4 and set that. We're going to use the number sign and color of colors. All right. And then in here we can say color. Okay. So you can put whatever you use here you can use here. And then this colors is coming from the property colors. So let's save that. And now if we look you can see that it's looping through the colors and outputting them on the screen. All right. So those are some of the template directives that you can use. In the next video, we're going to take a look at pipes.