142. Practicing and some Common Gotchas

Jul 15, 2026 05:35 · 6:07 · English · Whisper Turbo · 2 Ομιλητές

Αυτό το αντίγραφο λήγει σήμερα. Αναβάθμιση για μόνιμη αποθήκευση →

Δείκτης διάλεξης

0:02

S… Speaker 1 (142. Practicing and some Common Gotchas)

So now that we learned a lot about navigating passing parameters,

0:06

S… Speaker 1 (142. Practicing and some Common Gotchas)

let's improve our app a little bit by going to the users component

0:10

S… Speaker 1 (142. Practicing and some Common Gotchas)

where we have a list of links in the end to single users and

0:15

S… Speaker 1 (142. Practicing and some Common Gotchas)

let's add the router link here.

0:17

S… Speaker 1 (142. Practicing and some Common Gotchas)

pass an array as an argument and here we want to target

0:21

S… Speaker 1 (142. Practicing and some Common Gotchas)

slash users and we already created our route right we have slash users

0:25

S… Speaker 1 (142. Practicing and some Common Gotchas)

slash ID and slash name so we can use that information here

0:29

S… Speaker 1 (142. Practicing and some Common Gotchas)

in the users component the second element here in this array therefore should

0:33

S… Speaker 1 (142. Practicing and some Common Gotchas)

be the ID and since we have a for loop where we loop through all our

0:37

S… Speaker 1 (142. Practicing and some Common Gotchas)

users we can easily dynamically add the ID here by accessing

0:42

S… Speaker 1 (142. Practicing and some Common Gotchas)

user ID

0:44

S… Speaker 1 (142. Practicing and some Common Gotchas)

And the same for the name,

0:45

S… Speaker 1 (142. Practicing and some Common Gotchas)

the third element,

0:46

S… Speaker 1 (142. Practicing and some Common Gotchas)

the third segment in this path,

0:48

S… Speaker 1 (142. Practicing and some Common Gotchas)

the username,

0:49

S… Speaker 1 (142. Practicing and some Common Gotchas)

we can access username.

0:50

S… Speaker 1 (142. Practicing and some Common Gotchas)

This is how we can dynamically construct such a link.

0:53

S… Speaker 1 (142. Practicing and some Common Gotchas)

And you already saw this with the navigate method a couple of lectures earlier.

0:58

S… Speaker 1 (142. Practicing and some Common Gotchas)

So this is our route link here.

1:00

S… Speaker 1 (142. Practicing and some Common Gotchas)

Let's do the same for the servers.

1:02

S… Speaker 1 (142. Practicing and some Common Gotchas)

So here in the servers component,

1:04

S… Speaker 1 (142. Practicing and some Common Gotchas)

let's also replace the five here with server ID.

1:08

S… Speaker 1 (142. Practicing and some Common Gotchas)

We do have a server ID if we have a look at the service,

1:11

S… Speaker 1 (142. Practicing and some Common Gotchas)

at the service service.

1:13

S… Speaker 1 (142. Practicing and some Common Gotchas)

You see we have IDs and names here.

1:15

S… Speaker 1 (142. Practicing and some Common Gotchas)

So we want to pass the ID and we can now do this by dynamically

1:19

S… Speaker 1 (142. Practicing and some Common Gotchas)

fetching it here.

1:20

S… Speaker 1 (142. Practicing and some Common Gotchas)

And I will remove edit though,

1:22

S… Speaker 1 (142. Practicing and some Common Gotchas)

because I not only want to load the edit component here,

1:25

S… Speaker 1 (142. Practicing and some Common Gotchas)

I want to load the single server component instead.

1:28

S… Speaker 1 (142. Practicing and some Common Gotchas)

With my link added here,

1:30

S… Speaker 1 (142. Practicing and some Common Gotchas)

we need to add the fitting route.

1:31

S… Speaker 1 (142. Practicing and some Common Gotchas)

So in our app module here,

1:33

S… Speaker 1 (142. Practicing and some Common Gotchas)

we need to add another route where we have servers

1:37

S… Speaker 1 (142. Practicing and some Common Gotchas)

and then just ID to load a single server with the server component here.

1:42

S… Speaker 1 (142. Practicing and some Common Gotchas)

Right now, we're always loading the added server component.

1:44

S… Speaker 1 (142. Practicing and some Common Gotchas)

So make sure to add this extra route.

1:47

S… Speaker 1 (142. Practicing and some Common Gotchas)

And of course,

1:48

S… Speaker 1 (142. Practicing and some Common Gotchas)

this will be loaded because we removed the edit at the end.

1:51

S… Speaker 1 (142. Practicing and some Common Gotchas)

So we're not editing this anymore.

1:53

S… Speaker 1 (142. Practicing and some Common Gotchas)

This just loads the single component.

1:56

S… Speaker 1 (142. Practicing and some Common Gotchas)

Of course now in this single server component this one here where we want

2:00

S… Speaker 1 (142. Practicing and some Common Gotchas)

to output our server data We need to get that data.

2:03

S… Speaker 1 (142. Practicing and some Common Gotchas)

We pass in the route path in the URL We pass

2:08

S… Speaker 1 (142. Practicing and some Common Gotchas)

the ID there We do have a servers service where we are

2:12

S… Speaker 1 (142. Practicing and some Common Gotchas)

able to get a server by ID And we already do this in our server

2:16

S… Speaker 1 (142. Practicing and some Common Gotchas)

component here and engine in it right now always for the server

2:20

S… Speaker 1 (142. Practicing and some Common Gotchas)

with the ID one So now use your chance to update this

2:24

S… Speaker 1 (142. Practicing and some Common Gotchas)

code

2:25

S… Speaker 1 (142. Practicing and some Common Gotchas)

to do this with the ID being passed with our route.

2:29

S… Speaker 1 (142. Practicing and some Common Gotchas)

You'll learn everything you need for this.

2:31

S… Speaker 1 (142. Practicing and some Common Gotchas)

Time for you to do it on your own.

2:33

S… Speaker 1 (142. Practicing and some Common Gotchas)

I will give you the chance to pause this video before we do this together.

2:37

S… Speaker 2 (142. Practicing and some Common Gotchas)

So,

2:39

S… Speaker 2 (142. Practicing and some Common Gotchas)

were you successful?

2:40

S… Speaker 2 (142. Practicing and some Common Gotchas)

Let's try it together.

2:42

S… Speaker 2 (142. Practicing and some Common Gotchas)

Of course,

2:43

S… Speaker 1 (142. Practicing and some Common Gotchas)

to get access to the route parameter,

2:44

S… Speaker 1 (142. Practicing and some Common Gotchas)

we need to inject our activated route.

2:47

S… Speaker 1 (142. Practicing and some Common Gotchas)

So we learned how to do this,

2:49

S… Speaker 1 (142. Practicing and some Common Gotchas)

add this route property,

2:51

S… Speaker 1 (142. Practicing and some Common Gotchas)

and make it of type activated route,

2:53

S… Speaker 1 (142. Practicing and some Common Gotchas)

which you need to import from addAnglerRouter.

2:56

S… Speaker 1 (142. Practicing and some Common Gotchas)

And now in ngOnInit,

2:58

S… Speaker 1 (142. Practicing and some Common Gotchas)

you can get your ID from this activated route from

3:02

S… Speaker 1 (142. Practicing and some Common Gotchas)

the snapshot,

3:03

S… Speaker 1 (142. Practicing and some Common Gotchas)

the params object here,

3:05

S… Speaker 1 (142. Practicing and some Common Gotchas)

and then the ID,

3:06

S… Speaker 1 (142. Practicing and some Common Gotchas)

which is encoded in the URL.

3:08

S… Speaker 1 (142. Practicing and some Common Gotchas)

And now you can use this ID here to get that server.

3:11

S… Speaker 2 (142. Practicing and some Common Gotchas)

Now,

3:13

S… Speaker 1 (142. Practicing and some Common Gotchas)

if you also want to react to any changes thereafter,

3:16

S… Speaker 1 (142. Practicing and some Common Gotchas)

you need to subscribe to your

3:20

S… Speaker 1 (142. Practicing and some Common Gotchas)

params observable here.

3:23

S… Speaker 1 (142. Practicing and some Common Gotchas)

And basically do the same.

3:25

S… Speaker 1 (142. Practicing and some Common Gotchas)

You get the params here,

3:26

S… Speaker 1 (142. Practicing and some Common Gotchas)

which is of type params.

3:28

S… Speaker 1 (142. Practicing and some Common Gotchas)

Make sure to import that from at Angular Router.

3:30

S… Speaker 1 (142. Practicing and some Common Gotchas)

And once you get this,

3:32

S… Speaker 1 (142. Practicing and some Common Gotchas)

you can get a new server whenever your params should change.

3:36

S… Speaker 1 (142. Practicing and some Common Gotchas)

So here you could then access params ID like this

3:40

S… Speaker 1 (142. Practicing and some Common Gotchas)

to update the server whenever it changes triggered on this

3:45

S… Speaker 1 (142. Practicing and some Common Gotchas)

page.

3:45

S… Speaker 1 (142. Practicing and some Common Gotchas)

So with this in place,

3:47

S… Speaker 1 (142. Practicing and some Common Gotchas)

we reload our app and go to servers.

3:50

S… Speaker 2 (142. Practicing and some Common Gotchas)

You see,

3:51

S… Speaker 1 (142. Practicing and some Common Gotchas)

we get an error here,

3:52

S… Speaker 1 (142. Practicing and some Common Gotchas)

which makes sense because keep in mind on our servers

3:57

S… Speaker 1 (142. Practicing and some Common Gotchas)

component here,

3:58

S… Speaker 1 (142. Practicing and some Common Gotchas)

we still are always loading our single server component.

4:03

S… Speaker 1 (142. Practicing and some Common Gotchas)

And therefore,

4:03

S… Speaker 1 (142. Practicing and some Common Gotchas)

we are also loading it if we don't have this ID available.

4:07

S… Speaker 1 (142. Practicing and some Common Gotchas)

So for now,

4:08

S… Speaker 1 (142. Practicing and some Common Gotchas)

I will comment this out.

4:09

S… Speaker 1 (142. Practicing and some Common Gotchas)

We will soon learn how we can nest another router in there

4:14

S… Speaker 1 (142. Practicing and some Common Gotchas)

to have some kind of child routing to load this route dynamically

4:18

S… Speaker 1 (142. Practicing and some Common Gotchas)

next to our menu here.

4:20

S… Speaker 1 (142. Practicing and some Common Gotchas)

So for now, I simply comment it out.

4:22

S… Speaker 1 (142. Practicing and some Common Gotchas)

If I now click on a server here,

4:24

S… Speaker 1 (142. Practicing and some Common Gotchas)

we still get an error.

4:28

S… Speaker 1 (142. Practicing and some Common Gotchas)

And now this can be a tricky one to spot.

4:30

S… Speaker 1 (142. Practicing and some Common Gotchas)

What's going wrong here?

4:33

S… Speaker 1 (142. Practicing and some Common Gotchas)

The issue is if we parse a parameter from our URL,

4:38

S… Speaker 1 (142. Practicing and some Common Gotchas)

it will always be a string because our whole URL is simply just

4:42

S… Speaker 1 (142. Practicing and some Common Gotchas)

text.

4:42

S… Speaker 1 (142. Practicing and some Common Gotchas)

So ID here will actually not be one

4:47

S… Speaker 1 (142. Practicing and some Common Gotchas)

in the case of slash one,

4:48

S… Speaker 1 (142. Practicing and some Common Gotchas)

it will be a string of one.

4:50

S… Speaker 1 (142. Practicing and some Common Gotchas)

So if we try to get a server by this ID,

4:54

S… Speaker 1 (142. Practicing and some Common Gotchas)

it will actually search a server which has an ID of

4:58

S… Speaker 1 (142. Practicing and some Common Gotchas)

one but a string one.

4:59

S… Speaker 1 (142. Practicing and some Common Gotchas)

However, we use numbers here.

5:02

S… Speaker 1 (142. Practicing and some Common Gotchas)

So we simply have to make sure to convert our ID to a

5:06

S… Speaker 1 (142. Practicing and some Common Gotchas)

number. And we can do this by adding a plus in front of it.

5:09

S… Speaker 1 (142. Practicing and some Common Gotchas)

And this is perfectly fine to do with that you're making sure that the ID you're retrieving

5:13

S… Speaker 1 (142. Practicing and some Common Gotchas)

is treated as a number.

5:15

S… Speaker 2 (142. Practicing and some Common Gotchas)

Of course,

5:16

S… Speaker 1 (142. Practicing and some Common Gotchas)

you also need to make sure to do this here in your observable.

5:19

S… Speaker 1 (142. Practicing and some Common Gotchas)

So convert the params here to a number too.

5:23

S… Speaker 2 (142. Practicing and some Common Gotchas)

So with that,

5:23

S… Speaker 1 (142. Practicing and some Common Gotchas)

if we now click on servers and choose a server,

5:26

S… Speaker 1 (142. Practicing and some Common Gotchas)

you see production server here,

5:28

S… Speaker 1 (142. Practicing and some Common Gotchas)

test server in this case,

5:29

S… Speaker 1 (142. Practicing and some Common Gotchas)

and with that,

5:31

S… Speaker 1 (142. Practicing and some Common Gotchas)

this is now working as expected.

5:33

S… Speaker 1 (142. Practicing and some Common Gotchas)

We now improved our app because now we got working links

5:37

S… Speaker 1 (142. Practicing and some Common Gotchas)

here, we got working links here,

5:39

S… Speaker 1 (142. Practicing and some Common Gotchas)

and we're loading the correct server.

5:41

S… Speaker 2 (142. Practicing and some Common Gotchas)

So with that,

5:43

S… Speaker 1 (142. Practicing and some Common Gotchas)

we added a lot,

5:44

S… Speaker 1 (142. Practicing and some Common Gotchas)

but we see that our app has some limitations.

5:47

S… Speaker 1 (142. Practicing and some Common Gotchas)

It would be nice if we don't load a new page with the user or the server

5:51

S… Speaker 1 (142. Practicing and some Common Gotchas)

here, but load it next to our menu in both cases.

5:54

S… Speaker 1 (142. Practicing and some Common Gotchas)

So we somehow need some nested routing,

5:57

S… Speaker 1 (142. Practicing and some Common Gotchas)

some child routes kind of,

5:59

S… Speaker 1 (142. Practicing and some Common Gotchas)

to have a router inside a router.

6:02

S… Speaker 1 (142. Practicing and some Common Gotchas)

Let's have a closer look at this in the next lectures.

Αυτό το αντίγραφο δημιουργήθηκε από τον AI (αυτόματη αναγνώριση ομιλίας). Μπορεί να περιέχει σφάλματα Πολιτική AI

❤️ Σου αρέσει το STT.ai; Πες το στους φίλους σου!

Περίληψη

Κάντε κλικ στο Summarize για να δημιουργήσετε μια περίληψη AI αυτής της μεταγραφής.

Ρωτήστε τον Αλ γι' αυτό το σενάριο.

Ρωτήστε οτιδήποτε σχετικά με αυτό το αντίγραφο, το AI θα βρει σχετικές ενότητες και θα απαντήσει.

Τρανσέιντερ άλλος ένας...