144. Using Query Parameters - Practice

0:02

S… Speaker 1 (144. Using Query Parameters - Practice)

In the last lecture,

0:03

S… Speaker 1 (144. Using Query Parameters - Practice)

we added child routing.

0:04

S… Speaker 1 (144. Using Query Parameters - Practice)

Let's now improve this app a little bit more.

0:07

S… Speaker 1 (144. Using Query Parameters - Practice)

In our servers component,

0:09

S… Speaker 1 (144. Using Query Parameters - Practice)

we have our links loading the individual servers,

0:13

S… Speaker 1 (144. Using Query Parameters - Practice)

so the single server component,

0:15

S… Speaker 1 (144. Using Query Parameters - Practice)

this component here,

0:17

S… Speaker 1 (144. Using Query Parameters - Practice)

with this allowEditQuery parameter.

0:19

S… Speaker 1 (144. Using Query Parameters - Practice)

So now in the server component,

0:22

S… Speaker 1 (144. Using Query Parameters - Practice)

we should add some button.

0:24

S… Speaker 1 (144. Using Query Parameters - Practice)

where we say edit server,

0:27

S… Speaker 1 (144. Using Query Parameters - Practice)

because right now we got no way of reaching the edit server component besides

0:32

S… Speaker 1 (144. Using Query Parameters - Practice)

manually typing this route here,

0:35

S… Speaker 1 (144. Using Query Parameters - Practice)

this path here into our URL.

0:38

S… Speaker 1 (144. Using Query Parameters - Practice)

So let's add a button to the server component.

0:41

S… Speaker 1 (144. Using Query Parameters - Practice)

I'll add some CSS classes to make this look nice.

0:45

S… Speaker 1 (144. Using Query Parameters - Practice)

And of course,

0:45

S… Speaker 1 (144. Using Query Parameters - Practice)

I'll add a click listener where I say on edit.

0:49

S… Speaker 1 (144. Using Query Parameters - Practice)

Now again,

0:49

S… Speaker 1 (144. Using Query Parameters - Practice)

this is on a single server component.

0:52

S… Speaker 1 (144. Using Query Parameters - Practice)

So here I'll add the on added method.

0:56

S… Speaker 1 (144. Using Query Parameters - Practice)

And in here,

0:57

S… Speaker 1 (144. Using Query Parameters - Practice)

I now want to navigate to the added server component.

1:01

S… Speaker 1 (144. Using Query Parameters - Practice)

We learned how to do this.

1:03

S… Speaker 1 (144. Using Query Parameters - Practice)

We need to get access to the router so that we are able to call the navigate method.

1:07

S… Speaker 1 (144. Using Query Parameters - Practice)

So let's inject it.

1:09

S… Speaker 1 (144. Using Query Parameters - Practice)

Make sure to also add the import from at

1:13

S… Speaker 1 (144. Using Query Parameters - Practice)

Angular router.

1:15

S… Speaker 1 (144. Using Query Parameters - Practice)

And with that injected in onEdit we can navigate.

1:18

S… Speaker 1 (144. Using Query Parameters - Practice)

You learned how to do this,

1:20

S… Speaker 1 (144. Using Query Parameters - Practice)

so maybe a time to pause the video and try it on your own.

1:24

S… Speaker 1 (144. Using Query Parameters - Practice)

This is how I would do it.

1:26

S… Speaker 1 (144. Using Query Parameters - Practice)

I would call my router.

1:28

S… Speaker 1 (144. Using Query Parameters - Practice)

Then,

1:29

S… Speaker 1 (144. Using Query Parameters - Practice)

of course, we have the navigate method,

1:31

S… Speaker 1 (144. Using Query Parameters - Practice)

and here we need to pass an array.

1:32

S… Speaker 1 (144. Using Query Parameters - Practice)

And we simply want to append edit to the end

1:37

S… Speaker 1 (144. Using Query Parameters - Practice)

of the currently loaded route.

1:38

S… Speaker 1 (144. Using Query Parameters - Practice)

So you could,

1:39

S… Speaker 1 (144. Using Query Parameters - Practice)

of course, also use slash servers,

1:41

S… Speaker 1 (144. Using Query Parameters - Practice)

the relative path,

1:43

S… Speaker 1 (144. Using Query Parameters - Practice)

then use the ID of the currently loaded server again,

1:47

S… Speaker 1 (144. Using Query Parameters - Practice)

server ID,

1:48

S… Speaker 1 (144. Using Query Parameters - Practice)

and then append edit.

1:49

S… Speaker 1 (144. Using Query Parameters - Practice)

But since we already are on this path,

1:52

S… Speaker 1 (144. Using Query Parameters - Practice)

why not just use a relative route and just use edit?

1:56

S… Speaker 1 (144. Using Query Parameters - Practice)

Now you learned,

1:57

S… Speaker 1 (144. Using Query Parameters - Practice)

if you want to use a relative route,

2:00

S… Speaker 1 (144. Using Query Parameters - Practice)

a relative path here,

2:02

S… Speaker 1 (144. Using Query Parameters - Practice)

when using the navigate method,

2:04

S… Speaker 1 (144. Using Query Parameters - Practice)

you need to set up the relative to property

2:08

S… Speaker 1 (144. Using Query Parameters - Practice)

here on the second argument,

2:10

S… Speaker 1 (144. Using Query Parameters - Practice)

on this object you can pass to navigate and reference the currently

2:14

S… Speaker 1 (144. Using Query Parameters - Practice)

loaded route so that the angular router knows to which

2:18

S… Speaker 1 (144. Using Query Parameters - Practice)

route you want to navigate relatively.

2:21

S… Speaker 1 (144. Using Query Parameters - Practice)

So with this,

2:22

S… Speaker 1 (144. Using Query Parameters - Practice)

we should load the slash edit route.

2:25

S… Speaker 1 (144. Using Query Parameters - Practice)

We should append it to the end of our currently loaded route.

2:28

S… Speaker 1 (144. Using Query Parameters - Practice)

Let's see if this works.

2:30

S… Speaker 1 (144. Using Query Parameters - Practice)

If we go to servers,

2:31

S… Speaker 1 (144. Using Query Parameters - Practice)

click on our server and click on edit,

2:33

S… Speaker 1 (144. Using Query Parameters - Practice)

we load the edit server page.

2:36

S… Speaker 1 (144. Using Query Parameters - Practice)

And now here we want to control on whether the user is

2:40

S… Speaker 1 (144. Using Query Parameters - Practice)

allowed to update to edit the server or not.

2:44

S… Speaker 1 (144. Using Query Parameters - Practice)

The issue is...

2:46

S… Speaker 1 (144. Using Query Parameters - Practice)

You see,

2:47

S… Speaker 1 (144. Using Query Parameters - Practice)

we theoretically have our query params here,

2:51

S… Speaker 1 (144. Using Query Parameters - Practice)

allowEdit,

2:51

S… Speaker 1 (144. Using Query Parameters - Practice)

always set to 1 in this case.

2:54

S… Speaker 1 (144. Using Query Parameters - Practice)

But we lose this information as soon as we click Edit Server.

2:58

S… Speaker 1 (144. Using Query Parameters - Practice)

So that is something we need to fix before we can use

3:02

S… Speaker 1 (144. Using Query Parameters - Practice)

the information there.

3:04

S… Speaker 1 (144. Using Query Parameters - Practice)

We will fix it in the next lecture.

3:06

S… Speaker 1 (144. Using Query Parameters - Practice)

Before doing so,

3:07

S… Speaker 1 (144. Using Query Parameters - Practice)

let's implement the rest of the logic,

3:08

S… Speaker 1 (144. Using Query Parameters - Practice)

though. Let's say here on the servers component,

3:11

S… Speaker 1 (144. Using Query Parameters - Practice)

where we set the allowEditQuery parameter,

3:14

S… Speaker 1 (144. Using Query Parameters - Practice)

we don't always want to set this to one,

3:16

S… Speaker 1 (144. Using Query Parameters - Practice)

to true,

3:17

S… Speaker 1 (144. Using Query Parameters - Practice)

therefore.

3:17

S… Speaker 1 (144. Using Query Parameters - Practice)

We want to decide on whether we want to allow the editing,

3:21

S… Speaker 1 (144. Using Query Parameters - Practice)

depending on the server ID,

3:23

S… Speaker 1 (144. Using Query Parameters - Practice)

let's say.

3:23

S… Speaker 1 (144. Using Query Parameters - Practice)

So only if the server ID equals three,

3:27

S… Speaker 1 (144. Using Query Parameters - Practice)

let's say,

3:28

S… Speaker 1 (144. Using Query Parameters - Practice)

only in this case,

3:29

S… Speaker 1 (144. Using Query Parameters - Practice)

we want to allowEdit.

3:31

S… Speaker 1 (144. Using Query Parameters - Practice)

So we want to set it to one.

3:32

S… Speaker 1 (144. Using Query Parameters - Practice)

Otherwise, we will set it to zero.

3:34

S… Speaker 1 (144. Using Query Parameters - Practice)

So that's just a ternary expression,

3:37

S… Speaker 1 (144. Using Query Parameters - Practice)

checking the server ID,

3:38

S… Speaker 1 (144. Using Query Parameters - Practice)

and if it's not equal to three,

3:39

S… Speaker 1 (144. Using Query Parameters - Practice)

we will set it to zero.

3:41

S… Speaker 1 (144. Using Query Parameters - Practice)

So we will set the allowEdit parameter to zero.

3:43

S… Speaker 1 (144. Using Query Parameters - Practice)

That's the first step.

3:45

S… Speaker 1 (144. Using Query Parameters - Practice)

Now in EditServer,

3:47

S… Speaker 1 (144. Using Query Parameters - Practice)

of course, we want to be able to retrieve our query params.

3:51

S… Speaker 1 (144. Using Query Parameters - Practice)

So here,

3:51

S… Speaker 1 (144. Using Query Parameters - Practice)

we already get the subscribe method on the query params.

3:56

S… Speaker 1 (144. Using Query Parameters - Practice)

Now here I want to determine on whether we are allowed to edit or not.

4:00

S… Speaker 1 (144. Using Query Parameters - Practice)

So I will add a new allowEdit property here and

4:04

S… Speaker 1 (144. Using Query Parameters - Practice)

set it to false initially.

4:06

S… Speaker 1 (144. Using Query Parameters - Practice)

But whenever this changes here in the query parameters,

4:10

S… Speaker 1 (144. Using Query Parameters - Practice)

I want to get my query params,

4:14

S… Speaker 1 (144. Using Query Parameters - Practice)

which are also of type params to be imported from at AngularRouter.

4:18

S… Speaker 1 (144. Using Query Parameters - Practice)

And then here in the method body,

4:23

S… Speaker 1 (144. Using Query Parameters - Practice)

I will set this allowEdit equal to my

4:27

S… Speaker 1 (144. Using Query Parameters - Practice)

query params here equal to the allowEdit

4:31

S… Speaker 1 (144. Using Query Parameters - Practice)

ID or property we set there.

4:33

S… Speaker 1 (144. Using Query Parameters - Practice)

And now this either is one,

4:37

S… Speaker 1 (144. Using Query Parameters - Practice)

string of one,

4:39

S… Speaker 1 (144. Using Query Parameters - Practice)

of course, you could also pass true as a string here,

4:41

S… Speaker 1 (144. Using Query Parameters - Practice)

in which case I want to set allowEdit to true.

4:43

S… Speaker 1 (144. Using Query Parameters - Practice)

If it is not one,

4:46

S… Speaker 1 (144. Using Query Parameters - Practice)

I will set it to false though.

4:48

S… Speaker 1 (144. Using Query Parameters - Practice)

And in the template of this component,

4:51

S… Speaker 1 (144. Using Query Parameters - Practice)

we could simply add a heading,

4:53

S… Speaker 1 (144. Using Query Parameters - Practice)

let's say, where we say you're not allowed

4:58

S… Speaker 1 (144. Using Query Parameters - Practice)

to edit if,

5:00

S… Speaker 1 (144. Using Query Parameters - Practice)

and we can use ngf for this,

5:02

S… Speaker 1 (144. Using Query Parameters - Practice)

if allowEdit is false,

5:04

S… Speaker 1 (144. Using Query Parameters - Practice)

so if not allowEdit.

5:06

S… Speaker 1 (144. Using Query Parameters - Practice)

And we wrap all the rest in a new div,

5:10

S… Speaker 1 (144. Using Query Parameters - Practice)

so all this part here,

5:12

S… Speaker 1 (144. Using Query Parameters - Practice)

only if it is true.

5:16

S… Speaker 1 (144. Using Query Parameters - Practice)

And now all of a sudden we would control this,

5:18

S… Speaker 1 (144. Using Query Parameters - Practice)

but again,

5:19

S… Speaker 1 (144. Using Query Parameters - Practice)

the issue is,

5:20

S… Speaker 1 (144. Using Query Parameters - Practice)

if we click on edit server,

5:21

S… Speaker 1 (144. Using Query Parameters - Practice)

our query params disappear,

5:23

S… Speaker 1 (144. Using Query Parameters - Practice)

so it is always in the you're not allowed to edit mode.

5:27

S… Speaker 1 (144. Using Query Parameters - Practice)

Let's fix it in the next lecture.

5:28

S… Speaker 1 (144. Using Query Parameters - Practice)

Let's see how we can actually preserve our query params once

5:33

S… Speaker 1 (144. Using Query Parameters - Practice)

we navigate again.

144. Using Query Parameters - Practice

Samandrag

Spør AI om denne transkripsjonen