Template Loops

[00:00:00]
>> I got this nice, beautiful code on the screen. I'm a junior developer. I just started, don't roast me. I'm a junior. What feedback would you give me as a junior if you saw this code?
>> Use a loop.
>> Use a loop That's a loop. That's what I was doing in the air, yeah.

[00:00:23]
Gotta use a loop, right? So how can I do this? How can I make this with a loop? And you'll have some really cool stuff with the for syntax. I'm tell you what, this is special after I show it to you cuz you will not believe me. You'll not believe me, but it's okay.

[00:00:40]
I'm just gonna tell you. All right, so here's a for syntax. Looks very similar to a traditional for loop in our template. First, you got the @for, then you have item of cart, right? So it's individual elements of collection, individual element of collection, right? So this is our local variable item.

[00:01:03]
The cart must exist in our component class, right? But the item could be whatever we want it to be. I just called it an item cuz maybe you got a shopping cart, then track item by item id. Now why is that track important? Okay, without getting too deep into the weeds, this mechanic allows us to be hyper-efficient with the rendering.

[00:01:29]
When I say hyper-efficient we, okay, this is a true story about Angular, true story friends, you can check it out. We got a blog post about this. Angular wasn't really known for like rendering speed before, right? Nobody was talking about that. Let's be honest. We were pretty low in the ranking.

[00:01:45]
When we changed this, we went all the way to the front of the rankings faster than everything but SOLID with template rendering with lists. Specifically in this case, right? Faster than everything but SOLID. SOLID is the only thing that's faster than Angular with rendering now because of this syntax to track helps us to achieve that.

[00:02:06]
Okay, now not every part of Angular is fast and everything, I'm saying, rendering templates, working with lists and swapping rows, fast and everything, how do we come up with that data? An independent engineer maintains this list of speeds in this massive table. And he was like, this changed it.

[00:02:24]
And we saw the new list. We're like, is that us? We're looking good on there. Yeah, let's go. And then so that's the part of the new story. So this is a really huge performance benefit for you to use this syntax. Okay, and then you can reference whatever that item was, whatever you call that local variable.

[00:02:42]
You can reference it in your template. One of the cool thing about this you also can get access to the ID because you might want the ID like the iterator count, sorry, sometimes, like the index, that's what I meant not ID you want the index. You also get access to that if you want.

[00:02:57]
Okay, what dollar sign index which is special syntax. Okay, here's something else that's interesting. Anybody ever wrote a template and then you have your list of things, but you gotta have your conditional to display what if nothing showed up? So either show the list or show an empty message, okay.

[00:03:14]
Well here's what we offer you. You just tag on an empty at the end of this for, just tag it on there. So if it's empty, we show this. That's super clear, super readable from a person reading your code. They know exactly what's happening here. They don't have to kinda guess about your conditions and stuff.

[00:03:33]
So I'm gonna close up these files. Okay, gonna stop my server. Let me clean that right up. [SOUND] And then I'm gonna go into 05. Yeah, okay, we're doing good. We're getting there. I'll go to the README so we can be ready to rock All right, I'm gonna take my run this example so I can make sure I can run it and have it displayed on the screen, okay?

[00:04:10]
Okay, great, I can go and see what this is. This is huge. Let me zoom out a little bit. It's probably like a product listing for a vehicle, okay? So we're actually gonna solve this and make it work, make it look nice. It looks nice, but we're gonna actually fill in some data.

[00:04:29]
All right, so here's what's happening. So in app.component.ts, we got to update the component template to repeat the article listing, right, this article element with class equals listing for each of the elements in the carsList. Then we're gonna update the template to use the properties of the carsList and then save our code.

[00:04:59]
>> Can you explain the track item.id part?
>> Sure, let me just go back to that while people are working on that part. Let's go back to the track item by id. Okay, let me go back, cool. So track item by id, so this track thing here is just our way of being to have some optimizations when we're rendering your components, sorry, rendering the list in the templates, is for giving some optimization that we can have.

[00:05:25]
Right now we're saying track item by id. Ids work really great, right? But if you can't get an id, then you can also track by the item. React has a feature just like this when you do maps. I think you have a key or something like that. So it's very similar to that key idea that you can keep track of the dom elements as they're created by some unique value that can help you to be faster and smarter about when you have to re-render or swap rows and do all kinds of stuff.

[00:05:52]
That gives us that ability. So similar to the key in React similar but not the same. But you don't have to use id you can use the object itself. So if you only have the item, let's say, you can do item or you can do the indices in the array if you want to.

[00:06:09]
You can do lots of stuff. Good question, I like that question. I like all y'all questions. Keep ' coming. Let's keep cooking together. We're doing great. Y'all are doing so great. If you're not proud of yourself right now, you should be 'cause I'm proud of you. Here's an example where I decided that the styling for this was a distraction to teaching and I put it in a separate, you see?

[00:06:31]
So it's like 40 lines of styles, I just put it in a separate file because it was a distraction, it's too many, it's too much. You can't focus on your work, okay? And so then remember I said you could separate it if you wanted. So on line 36 of my editor, I have app.component.css reference.

[00:06:49]
But if you notice I went from styles, property to styleUrl, right? So I could tell it styleUrl. Okay, let's go, this is exciting. What's the first thing you wanna do? You want to have some fun, let's have some fun. All right, so this is the element, we gotta repeat this article element.

[00:07:08]
So I'm gonna collapse it just for a second. I'm gonna collapse it in my editor. I did not delete it. I'm just gonna collapse it so we can have some focused attention here. So @for, let's say car of carList. Then I want to track, and then I want to track, let's say, car.

[00:07:33]
Do I have ids on each car, I don't know. I gotta tick. I don't recall. So I don't have an id on these elements which is okay. So in that case, we can just track using the car object, okay? So that'd be good enough for now. That'll solve our problem.

[00:07:50]
Wait, I did not include, so it's gotta go actually around this thing. There we go. So all the code is still there. You see, I just collapsed it so that way we can focus on this part. Okay, this makes it look cleaner for us. Now if we go back to our screen, now we got a bunch of them.

[00:08:09]
Now let's make them look good with some data. So now we got to be referencing this car, right? We got a car. All right, so let's see what can we put the car details, car, make and model, all right. Now, how do you usually reference a car with their make and model?

[00:08:29]
How do you say it in just regular language when you speak it out loud? If I had a Focus made by Ford, what would I say?
>> Ford Focus.
>> Okay, so there are a couple of ways we can do this then. So we could do, we can interpolate two values or we could do just one expression.

[00:08:46]
We get to choose, is what I'm saying. So we could do two values. But if you wanted to, you could do that. So it's make and model. So it will be car.make, I guess, yes. And then car.model. All right, so now if we look at our screen. [LAUGH] All right, I'm only laughing at myself because I think my last one is clever.

[00:09:17]
Even though I'm kinda being smug, laughing at myself. I think it's very clever with the Fjord, but that's all right. All right, keep going. So we got that part. Let's fill in the rest of the data. Keep the party going. Can I tell you something while we're filling this in?

[00:09:30]
Can I tell you that my child can't stand our car? Six-years-old, he can't stand our car because he says it's slow. I drive a family vehicle. I drive a Kia SUV. And he thinks it's the slowest car. He's like, dad, I hate this car. It's so slow. You can't even go 50 miles per hour.

[00:09:49]
He says that and I'm like, it can bud, the car can go that fast. But he wants us to get a Tesla. And I'm like, no, I'm not buying $100,000 car, no. And so, yeah, it's a constant battle. Like, it's hard being a parent, man. You got kids who are just like roasting your car.

[00:10:09]
It starts early, I guess, and it only escalates. All right, so we got the year there. We got the transmission type, so automatic or manual. And let's see, do I not even have a property for that? Why didn't you all tell me? All right [LAUGH] okay, so here's what we can do to solve for that.

[00:10:30]
Here's what we can do, we can add it. All right, so I'm gonna add it quickly. Okay, so we know that should go here and we can do transmission and then we'll just say they're all automatic for now and then if we have any of our friends who drive manual, you can add your own and change it.

[00:10:51]
It's okay, you don't have to yell at me and like roast me and say like, I want to look at the comments on this one. People are like, he ain't even put the right thing driving automatic. So weak, I know,. Okay, there we go. And then we got the miles.

[00:11:09]
Okay, miles is good. Okay, and then let's see miles. And we should be pretty good to cook here, right? We're cooking, we're ready to roll. And then we got this last one, that price. Okay, great. We have all of our data, okay, and everything looked nicer when it wasn't like zoomed in by 1,000% but something that happened yeah, it's not for Specific Motors Spoke.

[00:11:38]
I just be writing stuff. Okay, all right, so yeah, so we're good. So now we have our for loop around all of these elements, right? And one thing you could probably do if you wanted, what else could we do to just improve this code if we wanted to?

[00:11:52]
Anything come to mind, friends? Anybody watching online? Does anything come to mind what you could do for this one to improve it? I'll tell you what I would do. I would probably take our car listing component and separate it into its own component because right now, this template is pretty complex, right?

[00:12:09]
Because we have quite a bit of markup in this template and we could separate this. But we'd have one problem. How would it know what data to display? We're gonna answer that question, don't worry, that wasn't a trick question. I want you to try to think. We can answer that, yeah.

[00:12:30]
>> You got track car. Do you have to put ID, or does it just assume ID?
>> Since there is no ID, right. So I have track car right here. You need to put something here, though. The track is mandatory. If you have an ID, IDs work great because IDs are usually unique, right?

[00:12:45]
So a unique value works great here. But because I don't have an ID, I'm saying, hey, try to track this object. And I'm hoping that it can check the object and you-
>> So you don't have to point to a property. You can point at an entire object.

[00:12:58]
>> Yeah.
>> That's the handle dynamically if we added something to the list, took something out of the list at all.
>> Yep.
>> Track that and update it.
>> Is it automatically generate like an iterator.
>> I don't know what it does, unlike under the hood, but that's the reason is correct.

[00:13:17]
What you said is for like row swapping, switching, deleting, editing. This makes this really fast and easy for us, right? Because you go to like Big O of 1 when you have an ID for something, right? But if you don't have anything, then we got to search for it.

[00:13:30]
And if you got millions of rows or whatever, it gives us-
>> It's just gotta be unique.
>> So I don't know if it has to be unique. I think it's supposed to be. Okay, here's how we can find out. Okay, let's try something. Let's just see what happens if we do something that's not unique or any of these.

[00:13:46]
Okay, so year is not unique. Both of these are 1991, right? So if I did track by car.year, let's see if we get any errors or if anything happens, right? So it still works. And if I refresh it, it still works. But I wonder if we had to do operations would it be slower now?

[00:14:07]
Or would there be any complications later on? I don't know. But I wonder what would happen now that we have a non unique identifier to track by. Let's click a little bit more, we get the empty. If we wanted to, we could go back and add this empty just for dexterity.

[00:14:22]
Is it dexterity or posterity? So I do an empty here and then we can just have whatever our content is and just say p of no listings available. And then if I were to change this, let's say carList to an empty object. It probably won't complain. We'll see.

[00:14:47]
It might not complain. Yeah, right, of course never. Of course, it's never because it's an empty array in TypeScript. Of course it is. If I could talk to the TypeScript team, I understand why it works like that, but that is my least favorite feature, is that you can't just make an empty array like that.

[00:15:07]
But here, here's what we can do. Well, we don't need to go any further than this. I don't want to spend more time because we have more things to do. What I was going to do was just take all these out for a second. I can comment them.

[00:15:17]
That'll be fine for now. Yeah, okay, I don't want to get too dragged down because we still have great stuff to learn together. Okay, I've changed this already, there you go. What, save. What, okay, I was gonna say that was weird. I was like, what, I think the server was just rebooting itself or whatever.

[00:15:42]
Okay, see, so now no listings available. Okay, so now you see how the empty works. So you've gotta experience both of those, awesome.