This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Component Demonstration" Lesson
[00:00:00]
>> Lukas Ruebbelke: All right, let me do a quick demonstration. I feel like I should do it from a command line too.
>> Lukas Ruebbelke: src/app.
>> Lukas Ruebbelke: So I'm gonna do a nachos component. This would not be happening if there was not Chipotle over there.
>> Lukas Ruebbelke: nachos. All right, from here, touch,
[00:00:31]
>> Lukas Ruebbelke: Actually we'll go here,
>> Lukas Ruebbelke: I'm gonna do the whole,
>> Lukas Ruebbelke: Thing. Just this one time. So we do the spec, we'll do the template. We'll do the css, okay? From here, let's hop back into our ID.
>> Lukas Ruebbelke: You can see that it's fairly conventional. So let's go into our component
[00:01:08]
>> Lukas Ruebbelke: And export class.
>> Lukas Ruebbelke: Isn't that interesting?
>> Lukas Ruebbelke: This is, as a JavaScript developer, the fact that it even knows what's happening. So I'll talk about this on the third day. But there's actually some language services things happening under the hood that says you have this component? This is probably this class you wanna create.
[00:01:34] From here, I'm going to do this because we have the help of the ID, generally import and decorate happen at the same time. Actually import happens first via autocomplete. So I've basically imported and decorated. And then selector, and we'll go with nachos, and we'll go template, URL.
>> Lukas Ruebbelke: Now, styleUrls is interesting because it's actually an array, because you can actually stack them together.
[00:02:31]
>> Lukas Ruebbelke: What is this complaining about? Yes, this is my least favorite. Ts lint is this trailing spaces thing. If I didn't have a bunch of people staring at me, I would actually just turn it off. But let's go into our template.
>> Lukas Ruebbelke: Okay, did I miss anything? I do not think so.
[00:03:00] Let me just double check that I did this right.
>> Lukas Ruebbelke: I think I did it correct.
>> Lukas Ruebbelke: So nachos, [SOUND]
>> Lukas Ruebbelke: Now the next thing that we have to do is we need to add this to our ng module, so that Angular knows about it.
>> Lukas Ruebbelke: NachosComponent, and so if you go up here you can see that it actually did the import as well.
[00:03:35] So thank you mature IDE, doing my work for me. And now how would we get this into our application?
>> Speaker 2: It's the selector.
>> Lukas Ruebbelke: Selector, thank you. So let's go here. Burritos, you're out of here. Add nachos. Hopefully this works.
>> Lukas Ruebbelke: Ta-da! Makes sense, kinda what I did?
[00:04:08] Class, import, decorate, and start putting stuff on it. Let me just do one thing real quick. I'm gonna go back over to here. And I'm just gonna bind to this thing calls spicy, you can see here. spicy =,
>> Lukas Ruebbelke: This, so it's a property. And that I can then bind to.
[00:04:38] So again, properties, methods, now it's available to your template.