Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Component Demonstration" 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:

Lukas puts his CIDER mnemonic to work by creating a simple Users component. After creating the class definition, he imports the Angular Component base class and adds some metadata to specify the component’s template.

Get Unlimited Access Now

Transcript from the "Component Demonstration" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Lukas: I think I'm going to do a component.
>> Lukas: So directory, let's just call this Users. Why not? Then we'll just go users.component.ts. I'm not going to add this to get, cuz we'll probably throw it away.
>> Lukas: Go Users, like so. Import component from.
>> Lukas: Is that actually picking that up?

[00:01:03]
>> Lukas: I thought I saw web store trying to tell me stuff. As a JavaScript developer, that is amazing. Yes?
>> Speaker 2: There's a quick question about breaking out a component. If you're to break out a component and create another component, do you put it in the same directory or would you create another directory for a sub component?

[00:01:26]
>> Lukas: So generally, I will break it out into a sub directory. I think for the sake of just speed, a lot of times I'll leave it in the same directory, and then I can go back and re-factor it. And so I start, I work through the process of re-factoring through promotion, and you may have heard me talk about this at the previous front-end masters workshop that I did, but there's not a problem with starting very local to the problem that you're trying to solve.

[00:02:03] So, if I want to test an idea or quickly verify something, I really want that feedback loop. And so, again, the question is, what's the fastest possible way I can get something working so that I can verify that this idea is where I want to go. And if I've already established that pattern, I may just jump a few steps, but there is nothing wrong for instance, of when you're building out a component, stubbing out your sample data right in the component.

[00:02:31] And just say, I don't know what this thing is gonna look like, so I'm just gonna create a JSON object or array, and putting it in there. And then from there, you verify like okay, now I've got the layout, I'm going to extract this out into a service.

[00:02:43] And then the question is, is this service ever going to live outside of this component? If yes, then you can extract it out and promote it to a common directory. And then if it's like, well this needs to be used across multiple projects, then you break it out into a repo.

[00:02:59] So I will oftentimes start as close to the problem I'm trying to solve even to where I'll put things in the same file, initially. But then I might put it in a folder, and then once it's verified, and I want somebody to look at it, then I would eventually want that to go in a separate directory.

[00:03:17] And so the idea is, when somebody looks at your file structure, they have a good sense of what the module hierarchy is and the relationship that your components have, one to another. A good example of this is Users. Or rather experiment, is that I was building out this experiments list and I realized, hey, I'm using this experiment details thing a lot.

[00:03:41] I'm going to extract that out into a component. And so now, it's here. But let's say I wanted to search the experiment, then I would probably create like an experiments search component. And that would also live in here, the experiments folder. It wouldn't have to go any higher, because it's specific to that feature.

[00:04:01] But when somebody looks at this, they can very quickly tell the hierarchy. There is some level of I think personal preference on this, into that depending, so basically I adopt what I called the pants rule. Is if you're gonna wear pants in your house, then I'm gonna wear pants in my, or when I'm at your house, I'll wear pants.

[00:04:21] And so in that sense is, if somebody does it a certain way, I think it's more important to be consistent than to be philosophically and religiously right. So I think I said this earlier, do you know what's better than being right? Getting stuff done. And so, to that is there's some level where I'll see them like it's probably not how would I have done it, but we're not hurting anybody.

[00:04:44] Now we're going to decorate it. Selector. We'll go with users.
>> Speaker 2: What are valid selectors?
>> Lukas: What's that?
>> Speaker 2: What could we put for selectors? Like what are valid selectors that are-
>> Lukas: Whatever you want. Well, I don't know if you can actually overwrite native HTML elements, or there are probably reserved keywords that you should not do.

[00:05:13] You can use pseudo selectors, right?
>> Speaker 2: Like "not", "a"?
>> Lukas: That's a good question. You know what? You just inherited the bonus challenge. Yeah.
>> Speaker 2: You can use any valid CSS selector.
>> Lukas: What?
>> Speaker 2: Any valid CSS selector.
>> Lukas: Wait, were you playing with me? You knew the answer the whole time?

[00:05:31]
>> Speaker 3: He was setting you up, yeah.
>> Lukas: Man. Scott.
>> [LAUGH]
>> Lukas: I see what you did there.
>> Speaker 2: I was serving you, I was waiting for the spike.
>> Lukas: Can't you see I'm under duress here? I'm live-coding!
>> Lukas: Okay so, class, import, decorator.
>> Lukas: Let's see if I can do something with this.

[00:06:06]
>> Lukas: Import, Users.
>> Lukas: If I get out of this alive, I will be so happy.
>> Lukas: Here we go, and this is actually important. Now that we want to use the UsersComponent within our HomeComponent, you need to define this as a directive dependency. And so we'll just go users.

[00:06:43] If you do not do this, nothing will happen, and you'll be left in a state of quandary, like what's the deal? More often than not, it's because you forgot to add your dependency within your metadata. So now that I have this, let's go over here
>> Lukas: And.
>> Lukas: Yeah.

[00:07:13] What do you think, Scott? Do you think it's gonna work? Of course he does. He does have faith.
>> Lukas: We are the champions of the world, see this right here? Yeah. Let me just go back, I feel like I really didn't sell that appropriately.
>> Lukas: All right everybody in the chat room, you might wanna sit down for this.

[00:07:47] Man, this is amazing! And then from there, we could enhance it.