This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Template Demonstration: Bindings and Styles" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: I'm gonna walk through and go in some of those features. Let's just build one from scratch and I was just reading this one.
>> Scott Moss: Is this too small, should I make this bigger?
>> Speaker 2: I could read it just fine but-
>> Scott Moss: Okay.
>> Speaker 2: I'm on the front row so.
[00:00:25]
>> Speaker 2: This is your opportunity on the back row, if you can't see it speak up.
>> Scott Moss: You can see it? Ok, cool. So, we'll just make a component and go over some of the template stuff. So, one sweet thing to do with TypeScript when you get your tooling set up, is check this out.
[00:00:41] You can do stuff like, you can just forget what you're importing. Just forget about it, come over here, type in where you're gonna input from, so Angular 2/core. And then you can go back to the inport and you'll get that nice lookup like that. Pretty cool. Tell you everything you need to know.
[00:01:00] Bam.
>> Speaker 2: So you don't have to memorize individual modules, you have to memorize the buckets of Angular core? There's a bunch of stuff in there I need, etcetera. So, that's definitely helpful.
>> Scott Moss: So we're just gonna make a component here. Nothing new, nothing fancy. Selector, any valid css selector, demo, template, we haven't made it yet, but, just gonna put it here.
[00:01:25] We'll get there.
>> Scott Moss: Notice that I'm using the require, cuz like you said, it's a good approach. I agree, I really like it. Better this way. So, require is the same things as import. This import, when it compiles down, just turns into this. So we can just use it.
[00:01:42] Cuz this is common JS. And it's gonna compile down to Common JS anyway. And the reason I know that is, if you go and look at our ts config, it says it right there. It says it's gonna compile it down to Common JS. And the reason I can't use import down here is because it's not part of the ES6 spec.
[00:02:01] You can only use import at the top of your file before any of your code is initialized unless you do a dynamic require like this, or if you're using system.js, you can do system.import. But, a regular standard import, you can only do the top of your file. So that's why I had to use a require here.
[00:02:19] And again, since web pack is also when we can require HTML file which is this gonna give us a string. So this is just going to render our string, which is awesome. Follow me? All right. It's the same thing as writing it in line. If I was to write this template in line, it would just be the same thing.
[00:02:40] But it's going to get the file, at built time, put it there, cool. All right, so there we are just going to export a class. Call it demo. And then let's just set up some stuff. Let's set up a message and we'll call it hello. Whoops, that's not right.
[00:03:00] Hold on. So notice I'm not really using any TypeScript here. This is all just ES6 v2015, I didn't use any types or anything like that, it's still gonna work. Shazam. So let's save that. Let's go up here. Let's make our HTML file.
>> Scott Moss: And then let's just put that message in here, on a h1.
[00:03:29]
>> Scott Moss: So, basic interpolation here. So if we go look at this, there it is. Hello.
>> Scott Moss: So, that's interpolation. So again, like I said, we can't do like that.
>> Scott Moss: Cuz we don't get access to that.
>> Scott Moss: It just breaks. Cannot read log of undefined. So we don't have access to global scope here.
[00:04:02] So that's proof of that. So that will freak out, so don't do that.
>> Scott Moss: And we also can't do bitwise operations and stuff like that. So that's basic interpolation. Let's check out event handlers. So we're gonna make a button. Click, let's make another button. And we'll say change me, and then on this click right here, on this button, what we wanna do is we wanna bind to the click event on the button.
[00:04:39] And we wanna register a statement. In this case, we'll just say handleClick, and we wanna invoke that function, just like that. So now what we need to do is, we need to be responsible and go back to our component, and actually make that method available on the prototype.
[00:04:57] So I'll just say handleClick() {-. Shazam. And then what I wanna do is just do an alert.
>> Scott Moss: So let's go back and check this out.
>> Scott Moss: Refresh. Now if I click this you get an alert.
>> Scott Moss: Pretty simple. So again, click. Handle the click. It's implied because this template is already loaded to this component, it has access to this component's scope, pretty much.
[00:05:38] So handleClick comes in here. So I don't have to say this component's name dot handle click inside the template. It already knows what context it belongs in. So that's event handling. Now let's set up property binding. So now what we can do is we can bind to the disabled property, and we want this button to be disabled when isDisabled is true, right?
[00:06:06] So now what we'll do is we'll come in here. And let's just add some basic styles. I don't think we talked about styles yet, but, maybe we touched on it a little bit. But Angular allows us to encapsulate our styles to the component, which is pretty great. Have you ever used CSS modules before?
[00:06:24] It's almost the same thing, except it doesn't randomize the CSS class names, it just encapsulates them because of the shadow down, which is really cool. All the styles that we define in this array right here will not be global, so we don't have to worry about them overriding other styles.
[00:06:37] It's pretty cool. And they cannot be changed from outside this component, by default. We can change that though. So button, background, color red. This is pure CSS here. Note that because I'm using ES6 strings here, simpler strings, that means I can use dynamic values in here, which is pretty cool, because this is JavaScript.
[00:07:05] So, I could substitute this with a value for a variable cart red or something that I had. So now you have dynamic styles, which is pretty cool. But we're not going to do that right now. So, back-up color is red. I'm sorry. I just hate ugly buttons. I can't stand them.
[00:07:22]
>> Speaker 2: Get them out of here.
>> Scott Moss: Get them out of here. There we go. I have to do this. I'm sorry.
>> Scott Moss: Cool, so we got that. Wait, no we don't. Has to be at least 80 pixels. I mean, how else would you click it? And then a good height of like 50 pixels, of course.
[00:07:47] Cool, okay, that will work. And then now, wait, yeah that will work. And now when the button is disabled, we gonna bind to the disabled property, when its disabled. Let's just set the background-color to pink and then we'd do a, cursor not allowed. Boom. So now, all we need to do now, if we go back and look at our template, we notice we have this isDisabled property so we need to initialize that.
[00:08:19] So I'm just gonna say isDisabled and we'll say false. Again, I'm not using any types or stuff here. I could if I wanted to. I could come in here and just say, you know what? You're a Boolean and it equals false. I could do that, but I'm not.
[00:08:42]
>> Scott Moss: I'm just gonna do that. And it still works. So, cool, now you've got that. And set up an alert. I'm gonna say this.isDisabled = !this.isDiabled; so just toggle it. All right? So now if you go back to our example, and we click this, there it is. It disables it.
[00:09:03] If I click it again, it's enabled. Disabled, enabled. All right, so how's al that happening? Because when I click this, this event handler, it's gonna call handleClick. Which then toggles this property. Which is then binded to this property and it disables it.
>> Scott Moss: Any questions on this so far?
[00:09:29] I see a lot of people scratching their heads. Yes?
>> Speaker 3: What kind of event data do you get back?
>> Scott Moss: Right now, we don't get any event data, because I'm not sending any event data. So, if I go in here and just like, Yeah, let's just args, I guess.
[00:09:47] Let's just see.
>> Speaker 2: Think its
>> Scott Moss: Yeah, I know, I'm just trying to prove a point, if anything is implicitly being passed in. So let's see if anything is being passed in for us here. Just take a look.
>> Scott Moss: No, so nothing is being implicitly being passed in, so that means we definitely have to do it ourselves.
[00:10:11] So I'll just pass in the event, and it's just gonna be a native event. It's not like some rap synthetic event, it's a native event. So we get access to what you would normally get if you registered a on click on any element.
>> Scott Moss: Yeah, just a mouse event.
[00:10:29] Cool.
>> Speaker 2: But then when you do outputs, then you get a lot more interesting things since you put whatever you wanted to do event so.
>> Scott Moss: And the other way around, you can send whatever you want on your custom event. Yes?
>> Speaker 4: There's a couple questions on, I think Lukas was covering them a little bit, but is there a way to put these dynamic styles into external CSS?
[00:10:51]
>> Speaker 2: And I said with require?
>> Scott Moss: There are so many ways to do that.
>> Speaker 4: And then the follow up question to that was, can you inspect the button with Chrome dev tools to show off the dynamic styles? Or, to see what that actually look like?
>> Scott Moss: Yeah, I could do that.
[00:11:05] So for the dynamics styles, I'm pretty sure there's a styles URL property that you can use first takes a URL to style sheet. So, that will solve that. If you wanted to do that. You could also just place these in a style sheet and using web pack we could just import this in as well using a raw loader.
[00:11:25] So, for instance, if we had a Web Pack configure to use the raw loader for a file extension of CSS, which we do, haha. That's awesome. Well, at least on mine I do, if you don't, you could do it. So that means now, and I'll just do it right now.
[00:11:39] I'll show you. We could take out these styles.
>> Scott Moss: And instead, we can just require demo.css and then, I'm just gonna make a demo.css. I'm just gonna paste that in there, without those strings. Save it. Save it and it should work exactly the same.
>> Scott Moss: And it does.
[00:12:16]
>> Scott Moss: Because this is just gonna be a string. The raw loader will just take any file and just turn it into a string. That's what raw loader does. And web pack, we set up in my config right here, that says hey, any file with a CSS extension, run it through the raw loader and that's how it turned into a string.
[00:12:34] If you wanted to do this without setting up your Web Pack config, protip, you can pass in loaders to Web Pack through the require like this. So, I could say, I wanna do raw loader, only for this one, you could do that. And then, what it would do is like, okay, I'm gonna require this file, but I'm gonna pass it through this loader first.
[00:12:55]
>> Speaker 2: Seriously powerful stuff.
>> Scott Moss: That's why I saw Web Pack is nuts. It's crazy. But it's really hard to grip. JS PM does that, too. So it's pretty awesome. And then as far as looking at the styles, let's take a look at them. Let's go take a look at this guy, and let's click and see what happens.
[00:13:17] Looks like it is definitely changing there. So it's all good. Boom. It's pink and not allowed. [LAUGH] And there, it changes.