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 (խոսքի ավտոմատ ճանաչում)-ի կողմից։ Այն կարող է սխալներ պարունակել։ Հետաքրքիր օգտագործման համար ստուգեք սկզբնական ձայնագրությունը։ Օգտագործողի քաղաքականություն

❤️ Սիրում ես STT.ai-ին, պատմիր ընկերներիդ։

Հոդված

Սեղմեք «Սահմանել» այս տեքստի AI- ի ամփոփում ստանալու համար։

Հարցրեք AI-ին այս տեքստի մասին

Ձեր հարցը այս տեքստի մասին — AI-ն կգտնի հարմար հատվածներ և կպատասխանի։

Հատկություն