Route Configuration & Input Binding

[00:00:00]
>> Alex Okrushko: OK, so now we'll start with Module 3, which will touch on the modern routing changes in Angular. And we'll be working with the page for the details. If you can see right now, clicking the view details doesn't do anything, so we want to be able to navigate to that page. So let's open again Module 3, Day 1, and you can see I already have it open, and we'll do some changes in our routing.

[00:00:37]
So first off, let's go to our route config, just in case, just remind us what it was before. So right now we have different paths that go to different components, right? And this ID is a unique way to pass specific ID to this component. And if you've been using Angular for a while, you know that the way to read that data is you'll have to inject the activated route, right?

[00:01:13]
And activated route header param. Let me just show you real quickly. So again, we're going to be working with this event details page. So the typical way would be either through component or we'll have the activated route, and then we'll inject activated route. Activated route, so it knows it's active, and then from this activated route, right, and we can have something that's called—I'll just assign it to something for ID, for example, right?

[00:01:57]
So this activated route had different things. One of them was a params, params map, but you can see that they are returning observable to us. So we'll need to get the params, then we'll need to basically subscribe, or we can actually—Angular has a few convenience methods for NGRX, sorry, NGRX, RxJS interoperability.

[00:02:30]
One of them is toSignal. So toSignal, it's coming from import, import from Angular, Angular core, RxJS interop. So it's for interoperability to convert things from observable to signal and vice versa. So we have this toSignal function that can help us to signal here, so we can convert that map. And then this map gives us an object, so we need to first of all call the signal, or we can have a computed, but anyhow, we can use this and basically read—this ID now is param map, right?

[00:03:33]
So then, and then for param map will access ID, which could be also const, of course. Const cannot be read-only, for example, but it could be undefined as well. So we can just say, hey, enforce this, right, to enforce this. So it's basically a lot of work for nothing. Or we can do the get method.

[00:04:02]
There you go. A lot of work for nothing really, right? Instead of doing all of this, what we can do is in our config here—I already edited here with component input binding—and what that allows is it allows us to just introduce regular inputs in the component. And if the name matches to what the route param is, you'll be automatically bound to this.

[00:04:38]
Really cool. So let's see how we can do it now. In the event details, instead of all of that stuff, we'll basically have our read-only ID, and we'll say this is the input of string, right? And again, we'll import the string. And that's it. One thing we'll just do is is required, right? So we make sure that it's there as well, so it's not empty.

[00:05:15]
That's it, really simple. So what I was saying, Angular simplifying things—it's just one of those examples, and now ID is automatically bound to one. We navigate to this page, and we can test it out, right? So for example, we cannot navigate yet, but if we get to this page and then we go to, for example, for the first event, we look at our Angular.

[00:05:54]
And we can see here, see, inputs, read-only signal of one. So I read the this parameter and directly bound to the input. Really cool stuff. Less typing, less work, just works automatically. OK, so then, now we have this input details. Let's just bring some life into this page as well. Like right now it's not doing much.

[00:06:26]
Let's just get the information for the specific ID. OK, so now we need to change, add to our event service another resource. So we'll use the same kind of resource approach, so this will be very familiar. So we can see and get event resource. Resources are not events, but event. And in this case, we don't have the query.

[00:06:59]
We just have the signal of ID, and it's again the string. Once again, we'll just return the HTTP resource here. In this case, it'll be a single instance, right, so we'll have the Devfest event. And then within the function body, once again, this is where we'll read ID. So I'll do the const, for example, event, event ID.

[00:07:35]
It calls the ID. This technically can be identified, so we sometimes want to make sure that if it's not there, then, you know, we're not calling anything. I think in our case we enforce this ID to be there. Yes, so this should be always there, and we enforce it also in our component, right, because we made it a required input, right?

[00:08:15]
So this is all enforced. So that check might not necessarily be necessary. I mean, it doesn't hurt to add it. And then when we return, we'll return the URL for the API call, for this API URL, and then slash specific event 80, right? By the way, if you really want, you can just use it here then, right?

[00:08:55]
That would work just as well. And then that gets you the resource for the specific ID. OK, now let's get back to our event details page, event details page. So now we'll inject our service. So we'll have read-only event service, inject, and we'll inject our events, events service, event service. There you go.

[00:09:30]
And now in this case, we'll have the event—or in this case I named the event resource just to match the name. Let's do that, event resource. Probably event would be better. We did event, events list here, right? So this resource is events. Again, up to you. Generally speaking, they don't recommend to provide the specific type in the name.

[00:10:05]
Should be just a thing, but again, both ways work, depending what you have in your team setup, what conventions you use. Both work. So now in this event service, we'll get the single event resource, and then we'll pass this ID that we're getting from the input. And again, notice I'm not invoking it, right?

[00:10:26]
I'm not extracting the values, so I'm passing the entire signal to it, right? So sometimes it can be getting confusing, like what I'm actually—whenever you unwrap it, it's a single time you pass just the value. OK, so now we have our event resource.