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

Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Component Demonstration" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas showcases how to create an Angular Component. After creating the class definition, he imports the component base class and adds metadata to specify the component’s template.

Get Unlimited Access Now

Transcript from the "Component Demonstration" Lesson

>> Lukas Ruebbelke: In our app I'm going to create a new feature widgets, gizmos. What I will do?
>> Lukas Ruebbelke: Let's do gadgets. So here,
>> Lukas Ruebbelke: Gadgets.component.
>> Lukas Ruebbelke: There we go, pair programming for the win.
>> Lukas Ruebbelke: Okay.
>> Lukas Ruebbelke: I feel like, what? I'll do this in line for, actually, you know what?

>> Lukas Ruebbelke: Let's do this not in line.
>> Lukas Ruebbelke: gadgets.component.css. If I spell this wrong again, call me out.
>> Lukas Ruebbelke: Okay, let's just go ahead and get this, let's just address the elephant in the room.
>> Lukas Ruebbelke: Put something clever here.
>> Lukas Ruebbelke: All right, I think we're ready. So, what should be the first thing that I do?

>> Speaker 3: Import core.
>> Lukas Ruebbelke: What's that?
>> Speaker 3: Import the core and export the class. Is that it?
>> Lukas Ruebbelke: Create the class. Gadgets. Component, okay. So, now that I've created my class, pretty simple, what's the next thing? Slider. Class. I. Import. You get like a half a point because you like whispered it.

[00:02:25] You're.
>> Multiple: [LAUGH]
>> Lukas Ruebbelke: That what just like import don't hit me.
>> Multiple: [LAUGH]
>> Lukas Ruebbelke: So, I'm gonna import component from, let's see if I can do this from memory.
>> Lukas Ruebbelke: All right, so then we're gonna decorate component.
>> Lukas Ruebbelke: But let's see something here.
>> Lukas Ruebbelke: So, sometimes, actually, your imports, you can kinda shortcut it with auto completion.

[00:03:10] Again, coming from ES5, that never happened, ever. And so, now that's pretty awesome. So, in my meta data, what are the two things that a component need?
>> Multiple: Selector.
>> Lukas Ruebbelke: Selector, yes, good. So-
>> Lukas Ruebbelke: We'll go selector and sticking with this prefix and then one more thing.
>> Speaker 4: Template.

>> Lukas Ruebbelke: Template or templateUrl.
>> Lukas Ruebbelke: Actually hold on real quick, that's not what I wanted, I have a feeling that I. There's a possibility, yeah so notice that they're using the ./, just what I wanted to check.
>> Lukas Ruebbelke: Gadgets.component.html,
>> Lukas Ruebbelke: Okay-
>> Lukas Ruebbelke: And you'll notice here,
>> Lukas Ruebbelke: That My IDE is not happy.

[00:04:23] And the error is gadgets component incorrectly, implement interface OnInit. Well, okay. And now, it's happy. So, now that we've created the component. What is the next step? How do we surface this to the application?
>> Speaker 5: Import it to the module?
>> Lukas Ruebbelke: Yes, good job. So now, that we have it, let's go into our app module.

>> Lukas Ruebbelke: And I'm just gonna duplicate this line.
>> Lukas Ruebbelke: We'll go gadgets/gadgets.component.
>> Lukas Ruebbelke: GadgetsComponent here, and so now that I've imported it, I can go down here,
>> Lukas Ruebbelke: And add it to the declarations. So now, that you've created it we need to make it available. We do that with NgModule, yes.

[00:05:28] Kennedy, the question is should we work along with the same project as instructor or use the gizmo challenge. So, once I issue this particular challenge, so up to this point you could have done everything in master and you just throw it away. For the next challenge, what I want everyone to do is, if we go here, start on the start branch and from there you will work and incrementally build out the application.

[00:06:01] So this is what I'm trying to do is essentially kind of do a variation of what the challenge will be so you can see it one time. And then, you have the opportunity to do it in your code base.
>> Lukas Ruebbelke: And there's two Chris P's in the chatroom.

>> Lukas Ruebbelke: There's a programming joke in there somewhere, I know it.
>> Speaker 3: There probably is, yes. Craig has a question, can someone explain in a bit more detail the implement keyword?
>> Lukas Ruebbelke: Yes, so the implement is, with TypeScript, one of the beautiful things of TypeScript, is we have interfaces.

[00:06:42] And so, what an interface is, is it is essentially a contract or a specification that something needs to implement. So, in our case if we go back to GadgetsComponent.ts, we're saying GadgetsComponent implements the OnInit interface and so now, I'm basically signing a contract by saying, I implement this interface that I have to implement the methods that this interface basically declares.

[00:07:20] And so, you can do this for classes, saying this class implements this interface, therefore, I'm obligated. You'll notice right here that my gadget's component, it's red, it's squiggly. And it's angry, the reason being is cuz I'm not implementing the ngOnInit interface. But the minute I actually find that method as put forth by this guy, let me see if I can actually see the interface.

>> Lukas Ruebbelke: Yeah, so this is actually the interface right here that, for OnInit, I have to implement ngOnInit. And so, what you're doing is, you're now giving the type script compiler, as well as programmers and ids, some information about how you expect this to behave. Well, yes.
>> Speaker 4: Kind of related to that, if you left off the implements OnInit clause, would Angular still call your ngOnInit?

>> Lukas Ruebbelke: Yes, yep. So, implementing the interface is totally optional but it's recommended that you do implement the interface, so that you can indicate this class. Is behaves this way. And so, one of the reasons why interfaces are important is because essentially you get awesome ID level support, but at compile time, it'll know, it'll start to catch things of like, hey, this is really not of this type.

[00:08:50] And so where interfaces become also important is when you're typing essentially objects. So, if we go for instance, into our shared folder, you'll notice that we are exporting an item interface. But now, we're saying when we have an item object, we can now type it to this. And it's guaranteed to have an ID that's required but it may also have img, name description or feature and so now you can know things about this.

[00:09:21] Let me see if this actually if this actually works. So cont item: Item =
>> Lukas Ruebbelke: So, if I go like this-
>> Speaker 3: You've got.
>> Lukas Ruebbelke: Yeah, I'm actually having a.
>> Speaker 3: Yeah.
>> Speaker 3: But your ID is saving you.
>> Lukas Ruebbelke: It is, so just saying, that's not legit. But now watch, so you can see it's angry.

>> Lukas Ruebbelke: And so, now it's, hey, we're good.
>> Lukas Ruebbelke: But, what I can also do
>> Lukas Ruebbelke: Is, you'll notice here, it's introspecting, because I'm saying it's of this type item, notice the hints that I'm getting here description, featured, ID, image, and name. And so, now, because I'm on an interface, is when I go, item., it knows what properties I'm telling it, because of an interface, what properties it can expect.

[00:10:36] And so this is, again java developers like .net developers who come from classical backgrounds take this for granted, I believe. But coming from an ES5 background this is magic. Just getting that did you mean this or constraining your options. So now, I can just go featured, boom. And then interest.

[00:11:00] Let's see what happens when I go like this. And so now, I'm trying to set it to one, two, three. But look, it's totally upset, why? Because it's bullion. So this is a way to essentially add author time and time. Kind of fix some things. So that's where implement comes from, is you're simply saying this class will implement these methods.

[00:11:26] Or you can also, not implement, but you can use interface as well to strongly type objects, and that's really, really awesome.
>> Lukas Ruebbelke: So Andy had a question. Can you change interfaces or chain interfaces? Absolutely, so if we go back here to, let's do, well I don't know.
>> Lukas Ruebbelke: OnDestroy.

[00:12:00] Again, you can see it's angry. We'll just go down here,
>> Lukas Ruebbelke: And it's happy.
>> Lukas Ruebbelke: Yep, so that is how that works. And now that I, kind of jumping back to where we were, if we go back to the App Module. So, we've imported this in, now let's go to, I don't know.

>> Lukas Ruebbelke: I'll go to students.
>> Lukas Ruebbelke: So again, getting IntelliSense here.
>> Lukas Ruebbelke: And because I've imported this, into the module. App students or the students component or the gadgets component rather. I can now define it here. So, if we go back here,
>> Lukas Ruebbelke: So, we're on the student's route but I was able to just drop in and dump in.

[00:13:17] The gadgets components and have it render. You could do this as a route as well which I bet we all know how to do that if we thought about it. Yes.
>> Speaker 3: Question from one of the. Are there any performance at that kinda leads to in lining templates and CSS in component?

>> Lukas Ruebbelke: No, it actually all, at least with the CLI using WebPack. So, with WebPack it essentially puts it all into one bundle. And so, it doesn't necessarily, it doesn't really matter it's a moot point. So anecdotally, one of the reasons why I really like, is because you get these optimized bundles you can consume.

[00:14:04] I was on a project where there was a little bit of a political thing. They were redoing a part of it in angular and the department was were losing control and so they were throwing shade at angula. And so, I said not a problem, let me just run some benchmarks.

[00:14:23] And so, there's a site called that essentially industry leaders have agreed these are kind of these 12 benchmarks and based on these 12 benchmarks you can get a score. And so, there's a goat plugin that you can actually run it against your site and get a score.

[00:14:38] And so, traditionally you should get 84, 82,83, 84. And I ran it against this application just ad hoc. And I basically got 90 out of 100, which is amazing. And the reason being is because one of the things they talk about is basically inline your HTML, inline CSS to the page.

[00:14:59] Put everything into a bundle, really condense everything. And once, I kind of brought that up before, we got 90 out of 100 and it was we're not saying HTML is bad, we're on your side now. But the one thing we got dinged on was that we had a large initial payload.

[00:15:19] Well that actually, depending on what you're doing, is a good thing, because the single most performance heavy thing that you can do on a mobile device is actually make a call over the cellular network. And so, you're better off, for mobile devices, especially on 3G. Actually encourage the large payload upfront, and reduce essentially, your network calls.

[00:15:42] And so, that's actually something where I was dinged on it, and on a desktop there might be a problem. But on a mobile device, you actually want to really incur that payload upfront. And so, even with the whole thing about lazy loading modules is you really need to consider your audience.

[00:16:00] Because if you in the background you're having to load those things and the experience depends on it you may be invariably, because you're incurring that network request, may actually be compromising the over all experience. So with webpack, you're not really taking a hit, because it all gets bundled into a single package at the end of the day.

[00:16:23] Especially when you do ngBuild, then it's even better.
>> Lukas Ruebbelke: Where is the webpack config file? Yes, that is a good question. Now, I need to remember, so all the configuration is actually in the angular cli.json file.
>> Lukas Ruebbelke: And then, all the web packy stuff is happening under the hood.

>> Lukas Ruebbelke: Now I will confess that Angular CLI had me at ng-serve and it just worked, and so I haven't done a ton of digging into the guts. But actually, that's a fair question. I did the same thing, like, where is led pack config? And it's happening all kind of from here.

[00:17:24] Actually, I think if we go up.
>> Lukas Ruebbelke: And it might even be actually tucked into the module as well, so I can follow up, that's a good question.
>> Lukas Ruebbelke: So crispy, will any of the load one file versus many versus many versus payload size be different with HTTP2?

[00:17:56] I don't know a lot about HTTP2 so, if somebody wants to comment on that if you know.
>> Speaker 4: I think the jury's still out. There's a lot of tests that show either way and things are still evolving on the performance side, so.
>> Lukas Ruebbelke: So according to Mark-
>> Speaker 4: Eventually, we'll have an HTTP2, course.

>> Lukas Ruebbelke: What if only there was a workshop on masters on HTTP2.
>> Speaker 4: Eventually.
>> Lukas Ruebbelke: Eventually when the jury comes in.
>> Speaker 4: Yeah, I'll have to reach out to the performance community and figure that out.
>> Lukas Ruebbelke: So, the answer is I don't know, I don't know very much about HTTP2.

[00:18:38] HTTP2, yes. Other than it's going to be even better than YARN. Totally kidding.