Dynamic Event Cards

[00:00:00]
>> Alex Okrushko: So instead of having the app event cards, multiple of them, we're going to introduce what we're going to use for loop, for loop, thank you. So I'm going to use the for loop. Just making sure that we are correctly using everything. I'm going to use the for loop. So before we can read the for loop, we need to make sure that event itself has value.

[00:00:35]
So events has value. We need to wrap anything where we access the value. The reason for this, if we don't check to get the value and we just read the value directly and it's still loading, Angular dot value will throw an error. So it's like a safeguard. We need to check if it has the value before we can read the value from this. So this is important.

[00:01:05]
This is some of the gotcha. This is part of the design decisions that Angular team did around the resource. Before accessing the value, you have to check if the value is present. So once we know the value is there, then we can have our for loop, and then we'll read the event of this now events value. Right, so now we can read this value. I'm going to wrap this with a for loop.

[00:01:39]
The other thing, and again, this is a new control flow syntax that was added, Angular now wants you to specify how you want to track each item within the for loop. This is an optimization technique, was previously optional optimization technique. Now it's a required one because there's no real good reason not to do it. So what we can do here is we'll say track, and we need to track somehow uniquely these different elements between each other.

[00:02:14]
In our case, it's easy because we have the event ID for us, right? So now the DOM, it will control if this, if your array changes, is like, oh, do I have this ID you'll reuse that specific element, DOM node instead of destroying it and creating a new one and then rebinding all the inputs out. It's much easier to reuse. Reuse recycle, here you go.

[00:02:43]
So now we have this title, which is, we'll be reading from the event title. Image that we'll be reading from event image. Date from the event date. And see, I'm now using the square brackets because I'm reading it off the value. I'm not passing the little strings. Date, all right, so do we need anything else? Delete so far, no, good. Oh, by the way, that's a really cool another trick that we have for the for loop.

[00:03:24]
We can say if there's an empty. Right, so again, this is something new. Before you couldn't control this, now you can. You can say, hey, if there's an empty, I just have some paragraphs that say no events found. All right, so this is value. While we're here, we can also look in how to handle like the errors and loading, right, because this has value.

[00:03:56]
Everything before that doesn't, so let's check if there is events error, if it has errors. Spiral loading, we don't show the results, then we'll just say failed to load events and can I just copy paste this, so we can save time typing. And the thing, the same thing for loading. If it's loading, we just show whatever, in this case, loading events text.

[00:04:29]
All right, so now, now it should work the first time. Let's see, here you go, here you go. Now we have this, let's see, loading events, now it's loaded. This is our two second delay. Here it is, right? It's pulling the actual data, passing the actual data. Now we have this event in one day, two days, twelve days. Cool, like still works, dates working, so the whole thing is connected.

[00:05:03]
The images are connected as well. It's pretty cool, but again, the search is not working. That's what we, that's what we want to address now. And we see that our XHR, here's our events response that gave us all the data, right, but no queries attached, kind of jumped a little bit ahead. It's not attached because it's not implicitly tracked, so this should now fix this and now.

[00:05:40]
There you go. Now I'll load events that have Angular in the description or the title. Yes, I noticed you use the dot has value, right? Does it come with the HTTP resource, right? Or yes, so dot has value is part of the resource API itself. HTTP resource implements the resource API, so things like is loading error, has value, value, they are all part of the resource API.

[00:06:18]
What's the advantage of injecting a function instead of a class? What's the injecting a function versus class? So that becomes composability, because functions you can create on the fly and classes, changing anything in the class, it's basically impossible once you declared it in the class. With functions, you can create as many things as you want and then return a final object to the consumer.

[00:06:56]
We'll see this especially in the advanced Angular course, well, once we start talking with like, for example, interacts signal, so signal store, we'll see that very much highlighted. Yes, so that's the biggest issue with classes and a lot of times, sometimes you need just to create class and have some properties in it because there's no other way to inject something into anything before, only through constructor.

[00:07:26]
But yes, this functions now allowed to do magical things and even today, we'll see one more example of this, once we get to the inject tokens, which we the last module of today.