Creating a Component

[00:00:00]
>> Now, I touched on this, but Angular, TypeScript, HTML, and CSS, those are the three parts you need to know for Angular, TypeScript, HTML, and CSS. If you are at home and let's say you don't have any TypeScript experience, your JavaScript experience will be enough to get you there, because the TypeScript stuff is just really JavaScript with Types involved.

[00:00:19]
And just being able to describe the objects and data that you're working with. TypeScript is very complex in terms of how far you can go. You can go as far as you want with complexity in TypeScript. But for this course, you don't need that experience, right? Your JavaScript skills will help you read the code and we will do examples that work for you.

[00:00:37]
Now, at the core, at the bottom level, right, you need components in Angular. They're like the fundamental building block of any application, okay? The fundamental building block of any application. So you got TypeScript for your logic in your component. So you have a component class with TypeScript. Your templates are made with HTML, okay?

[00:01:10]
And this isn't like our version of HTML, it's just HTML. So if you have HTML skills, you use that with the application. And then let's say you're styling, you use CSS. But we also support SAS and LESS if you wanna use one of those preprocessors. You can also use a CSS preprocessor if you'd like.

[00:01:30]
But again, here's some of the strengths, right, cuz people wonder, why would I use Angular? Well, if you already had HTML skills, and let's say you were a CSS wizard and you knew how to build incredible UIs, directly transferable skills, right? You use that same stuff, not a special Angular version of CSS, your same CSS skills, apply your same HTML like knowledge applies.

[00:01:52]
So all these you know, for accessibility, you bring all this stuff right in, and it just works out of the box, okay? Now, how do you actually build a component in Angular? So let's start from the very beginning of building a component in Angular, very, very top level, okay?

[00:02:08]
Yeah, your component, you gotta import it at the file level. Okay, we import at the file level from Angular. Then we use this pattern called decorators. Give me your hands up if you seen a decorator before? Maybe in Java, any Java developers in the room? Yeah, okay, so decorators, you've seen this magic before.

[00:02:26]
But a decorator just allows you to take a property or a class and add some behavior to it, okay? We're gonna add some behavior to it. This decorator, the component decorator, lets us take what would normally be just a TypeScript class and imbue it with magical powers that make it a component, right?

[00:02:45]
It just makes it very special, okay? Now, this decorator takes some properties. Let's look at the properties. First thing you do, because components are referenced in our HTML templates, you gotta give it a tag name, like a selector, we call it selector. Yeah, questions.
>> Do decorators work similarly to extending classes?

[00:03:09]
>> Do decorators work similarly to extending classes? I don't know if that's a completely accurate way, because when you extend the class here, that's more about inheritance, right? Versus decorator is more about just adding things on.
>> Like an interface?
>> Almost like an interface, right? So where your interface is behavior that you can add to your class versus saying, I inherit the behavior of this other thing and now I have new behavior, my own behavior on top of it.

[00:03:38]
But you're not inheriting anything with a component decorator, you're just gonna be adding on things. So think about your car. Okay, here's the good way to think about your car. You can add on a spoiler to the back of your car and that will decorate your car, right?

[00:03:49]
And now the spoiler has all the aerodynamic changes that add it to your car, which your car is still the same car, you take it off, it's still the same car, right, at the core. And so think about a decorator like that. You can add things onto a car to give it more things.

[00:04:03]
You can add on some Nitros or some boosting, okay? Hopefully that answers your question. Thanks for a good question. Okay, standalone: true. Now, one of the things in Angular's history was that we had this thing called modules that were really good in theory. We thought it was a good idea.

[00:04:20]
It was a good idea, except for at scale, it became problematic. And I'll tell that story a little bit more throughout the day of where there are things that we've changed now, because at the time, it was a good idea, and then at scale, we found trouble or problems with it from the community.

[00:04:34]
You used to need something called a module which handled all of your dependencies for your application. So you're like, this component is going to reference A, B, and C service. So I have a module that will organize that for me, and then I'll know, hey, whatever is in this module is available to these components.

[00:04:50]
That sounds great. Yeah, the right abstraction layer, except for it became confusing, because was it a Ng Angular module, or was it a ECMAScript module, or was it a CommonJS module? Did it have the same behavior? Were they related? And they weren't even related. And then when you had a large application, again, at scale, you had so many modules that it created a level of indirection where you couldn't be sure where things belong anymore, right, and it became more complex.

[00:05:24]
And so we made modules optional. But in order to do that, we have to add a new flag called standalone: true, okay? So that's means you don't need a module. So whatever you get in this component is what you get, it's this stuff, okay? Then you have your template string.

[00:05:42]
Now, your template string is just a regular string, but you can also make this separate into a file if you want. So what are the rules around that? Because I know people are gonna be thinking about this. I be reading y'all mind at home, I already know. But Mark, what if my template is really big?

[00:05:59]
You're right. If the template is huge, you can separate this into a separate .html file. So for small templates, put it in line. There's just less files to manage. For large templates, take it out, take it out. Somebody else can work on that while you work on the class or the logic, right?

[00:06:17]
You can separate things like that. Okay, styles, the same idea. Styles is a string in your component, or you can make it a separate file, all right? Same idea, if you've got a lot of styles, separate them. Here's what's interesting about styles though, they're scoped in Angular. So they don't leak out of your component.

[00:06:38]
So you can define styles for things like a P tag, for example, that will be scoped to your component but not leak out to the rest of your application, which makes your components really reusable. Because now you can say, well, I have all these styles that are for my, let's say, user profile component, custom stuff that I wrote up, and I could just take that and plop it anywhere else in my application and those styles will not conflict, because they're scoped to the component.

[00:07:08]
I know that feels good. When I first saw that myself, I thought, ooh, that feels good, I like that idea. All right, and then you have our component class, which if you don't have any logic, it can be an empty class. But you cannot do functions, why? We don't support function components.

[00:07:22]
And we get that question a lot like, will we support function components? And the answer is, there is no answer right now. We don't see the value yet that'll help move everyone forward. Right now, class components solve the problems that the community has and that's what we're sticking with right now, okay?

[00:07:41]
But we'll never say never, right? Because, again, at scale over time, you learn lessons, and you have to adjust. But for now, know the function components, okay? And so this AppComponent class could stand alone without this decorator, and it would still be a valid TypeScript class. But remember, I talked about the car example with the spoiler, right?

[00:08:02]
We add the decorator on there, now a special. It can do some extra stuff. Questions from our community, sure.
>> Can you still use a global style sheet?
>> Yes, you can. Excellent question, can you still use a global style sheet? If we were to look back at our application, you'll actually see that, let's see, well, we can look in this one, in the source.

[00:08:24]
So there's my app, but then we got styles.css. This is global, so for that first example, I want every component to inherit the font family, right, every element that to have this font family, and I can put whatever I want in this global style. Yeah, it's good. Good question, I love that question.

[00:08:47]
All right, so remember how we talked about the format? I'll do some stuff, we'll look at the example, and then we'll do it together. So let's get back into the code. So now, let's go back to this project, the one we just ran. And now, if you open up the README, I have some tasks.

[00:09:08]
I got some tasks. So if you open up the README, did you know in VS Code that you could preview a README in here by doing Cmd+Shift+V or Ctrl+Shift+V? And if you didn't know, now you know. Check this out. [SOUND] Look at that, really nice. Okay, so now, we can see what our task are.

[00:09:26]
So if you wanna run this example, there are the steps. But here's what I want you to do. Let's go in here and let's make these changes. I'll do this one with us, and then we'll see as the day goes on, I'll get a feel for how everyone's doing, and maybe I'll let you try some of them on your own first.

[00:09:41]
But for this one, let's do it together and go through all the steps together. Okay, so our first step, we need to create an ordered list with three of our favorite books, movies, or songs. Okay, where should we do that? Can somebody just yell it out for me?

[00:09:58]
Where should we do that?
>> The component?
>> App component?
>> Right, in app.component.ts, that's right, that's where we should do that. Okay, so let's go and make sure that we find and track all of that, in app.component.ts under our Hello Angular project. We open that up. So the first thing was we had to make our audit list.

[00:10:22]
How do you make an ordered list?
>> ol. Yeah, ol, I don't ask trick questions, I promise. The reason why I'm asking you folks what to do is because I want you to feel comfortable because this is a new file for some of you, right? I want you to feel comfortable just jumping in and doing stuff.

[00:10:43]
So trust your instincts. So we make our audit list. And I asked you for your favorite songs, movies, or books, I think. So I'll do one of each, okay? So my favorite song right now. What is my favorite song right now at the time of this recording? Hmm, there's a lot of good song.

[00:11:04]
[LAUGH] all right, friends at home, I need a commitment from you right now that this is a safe space and a judgment-free zone. Because the song that I love right now that I cannot stop with is ETA by NewJeans. Now, NewJeans is this K-pop band, and I know, that's what I'm saying.

[00:11:26]
And they have a hold on me right now, I can't break it. It's in my brain, I mean, I'm actually writing a solo for this song on guitar, because I like it so much, so I'm like, I'm gonna add a solo to this. And yeah, the song is so good.

[00:11:40]
Do you feel good? All right, stop, let's keep going on. All right, we'll add another one, I'll keep moving faster, sorry. I don't wanna tell too many stories. All right, let's keep going. One of my favorite books is Ready Player One. And this is by, I cannot think of the author's name right now.

[00:11:59]
All of a sudden, my brain is going blank. Let's go, we'll come back to it. Somebody on the chat tell me the author of Ready Player One, cuz I can't remember. All right, favorite movie, somebody give me one of your favorite movies, if you're comfortable.
>> Dodgeball.
>> Dodgeball, if you can dodge a wrench, you can dodge a ball, that's right.

[00:12:17]
[LAUGH] That's a really good one. Yeah, I like that. All right, awesome, awesome, how can we tell if this even worked?
>> Go back to the browser.
>> Go back to the browser, that's right, no trick questions. So to run this example, I do ng serve from the command line in my project, and I type in the name of the project.

[00:12:38]
And just a quick note about this, this ng serve hello-world, you don't have to do this if you don't have a multi-project workspace. You just do ng serve if you have a single project. But because I have a multi-project workspace, I gotta specify my project.
>> Someone said, Ernest Cline.

[00:12:56]
>> Ernest Cline, that's right, that's right. Okay, so this isn't working. Did I-
>> hello-angular.
>> It's hello-angular. Well, look how helpful we're trying to be here. This error message is awesome, because it tells you, here are the projects that you can choose from, cuz the one you chose is not listed here.

[00:13:16]
So it's hello-angular. But that red is scary, though. Imagine seeing all that red [LAUGH] on the first example. [LAUGH] Not a good time. All right, super awesome. So we got that, so let's go back to my browser, let's reload. Okay, so we're most of the way there for this example.

[00:13:35]
We've got our ordered list, but I asked you to do one thing here. So let's go back. That's why, pressed the wrong button. Okay, in the same file, we need to update the styles to use Roman numerals instead of bullets. Now, I care about you, so I gave you the styles for this already.

[00:13:54]
I don't wanna make your life harder. Friends at home, I care about you, watch this, all right? So we just need to apply style to our ul. So let's do that in app.component under styles. So I'm seeing ol, so we do ol, same exact syntax, ol, and then you put your list-style-type.

[00:14:18]
Now, some of you may have some experience with HTML and know that you can also specify it at the ol level and the HTML as an attribute. I know you can do that, I know. You don't have to yell at me about that on the chat. I know you can do that, I want you to try it in CSS, okay?

[00:14:34]
Don't be mad at me. So the reason that you can see all the highlighting in this template like this is because of the Angular Language Service. That's why I was saying if you install that plug in, it gives you highlighting in a template and then it'll also do some other really nice features that'll make our development life, our development experience more ergonomic, okay?

[00:14:55]
So now, in my styles, I have my ol. And then the Angular CLI with that build server, you see where it says reloading clients? It does a refresh, but temper your expectations because it's not gonna maintain state right now, right? So we don't do full HMR yet. You can enable HMR, like hot module replacement, where you can maintain state, navigation, etc.

[00:15:18]
We can maintain your navigation, but it's going to reset your state, right, cuz it's just reloading the page for you, okay? But we are working on a better HMR experience right now. All right, and then we got it, let's go. This feels so good to me. You know why?

[00:15:32]
Because we just did two things. We did three things, we ran a project, we updated the template, and we updated the styles, with the skills we already have. Really, really nice experience.