140. Passing Query Parameters and Fragments

0:02

S… Speaker 2 (140. Passing Query Parameters and Fragments)

In the last lecture,

0:03

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we learned how we can retrieve our route params.

0:05

S… Speaker 2 (140. Passing Query Parameters and Fragments)

That's awesome.

0:06

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And this is super important,

0:07

S… Speaker 2 (140. Passing Query Parameters and Fragments)

something you will probably use a lot.

0:09

S… Speaker 1 (140. Passing Query Parameters and Fragments)

Now,

0:10

S… Speaker 2 (140. Passing Query Parameters and Fragments)

there are more things you can add to your URL,

0:13

S… Speaker 2 (140. Passing Query Parameters and Fragments)

though. You might have query parameters.

0:16

S… Speaker 2 (140. Passing Query Parameters and Fragments)

These are the parameters separated by a question mark,

0:20

S… Speaker 2 (140. Passing Query Parameters and Fragments)

like mode equals editing,

0:23

S… Speaker 2 (140. Passing Query Parameters and Fragments)

anything.

0:24

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And you can have multiple ones separated with add signs.

0:27

S… Speaker 2 (140. Passing Query Parameters and Fragments)

The question now is how can you pass them using Angular links,

0:31

S… Speaker 1 (140. Passing Query Parameters and Fragments)

router links,

0:32

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and how can you then retrieve them?

0:34

S… Speaker 2 (140. Passing Query Parameters and Fragments)

You might also have a hash fragment,

0:36

S… Speaker 2 (140. Passing Query Parameters and Fragments)

so separate it with the hash sign to jump to a specific place in

0:40

S… Speaker 1 (140. Passing Query Parameters and Fragments)

your app.

0:41

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Loading,

0:42

S… Speaker 1 (140. Passing Query Parameters and Fragments)

for example.

0:43

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Or maybe you don't really want to use this to jump there.

0:47

S… Speaker 2 (140. Passing Query Parameters and Fragments)

You would have to add this,

0:48

S… Speaker 2 (140. Passing Query Parameters and Fragments)

scroll down there behavior on your own.

0:51

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Maybe you just want to retrieve it to use it as some extra information.

0:56

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Let's take a closer look at how we can pass this extra information

1:00

S… Speaker 1 (140. Passing Query Parameters and Fragments)

on our links,

1:01

S… Speaker 2 (140. Passing Query Parameters and Fragments)

both when using the router link directive and the navigate method

1:05

S… Speaker 2 (140. Passing Query Parameters and Fragments)

in code, and how we can then retrieve that information.

1:08

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Let's start by passing it first.

1:10

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Let's say in our app module,

1:12

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we want to add more routes for our service here.

1:16

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We also want to add one other route,

1:18

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and that would be the route which allows us to

1:23

S… Speaker 2 (140. Passing Query Parameters and Fragments)

edit a certain server.

1:24

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So we might load a server with some ID and then have slash added

1:28

S… Speaker 2 (140. Passing Query Parameters and Fragments)

at the end to describe in the URL what will happen in this component.

1:32

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And here it would be the added server component

1:36

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we want to load.

1:37

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So we added this new route,

1:40

S… Speaker 2 (140. Passing Query Parameters and Fragments)

which should load this component in this added server file.

1:44

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now to be able to load this route on my servers component

1:48

S… Speaker 2 (140. Passing Query Parameters and Fragments)

here, I want to hook up these links here in this

1:52

S… Speaker 1 (140. Passing Query Parameters and Fragments)

list.

1:53

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We still have to do the same for the users component later.

1:55

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So here I will add my router link and I will

1:59

S… Speaker 2 (140. Passing Query Parameters and Fragments)

use the squared bracket syntax again so that I can pass

2:03

S… Speaker 2 (140. Passing Query Parameters and Fragments)

an array here because I want to go to slash servers.

2:07

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Then let's say server with ID 5.

2:09

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We will soon learn how to make this more dynamic.

2:13

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and then also edit.

2:15

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So this is this newly

2:19

S… Speaker 2 (140. Passing Query Parameters and Fragments)

created route I want to call in this case.

2:21

S… Speaker 2 (140. Passing Query Parameters and Fragments)

If we save this and we go to

2:26

S… Speaker 2 (140. Passing Query Parameters and Fragments)

servers and click on this,

2:27

S… Speaker 2 (140. Passing Query Parameters and Fragments)

you see we loaded service 5 edit and the same for every

2:31

S… Speaker 2 (140. Passing Query Parameters and Fragments)

link, of course.

2:32

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Again, I will change this soon.

2:33

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now let's say we also want to have some query parameter

2:37

S… Speaker 2 (140. Passing Query Parameters and Fragments)

deciding on whether we are allowed to edit the server or not.

2:41

S… Speaker 1 (140. Passing Query Parameters and Fragments)

So...

2:43

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We want to add this question mark,

2:45

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and we don't do it by adding question mark equals something here as another

2:49

S… Speaker 2 (140. Passing Query Parameters and Fragments)

element in this array.

2:50

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Instead,

2:52

S… Speaker 2 (140. Passing Query Parameters and Fragments)

when using a link in the template,

2:53

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we add a new property of this router link directive.

2:57

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We can bind to the query params property.

3:01

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now,

3:02

S… Speaker 2 (140. Passing Query Parameters and Fragments)

query params,

3:03

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and that's important, is not a new directive.

3:04

S… Speaker 2 (140. Passing Query Parameters and Fragments)

It's just another bindable property of the router link directive.

3:08

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And here we have to pass a JavaScript object

3:13

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And on query perms,

3:14

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we can now define key value pairs of the parameters we want to

3:18

S… Speaker 2 (140. Passing Query Parameters and Fragments)

edit. So for example,

3:20

S… Speaker 2 (140. Passing Query Parameters and Fragments)

say allow edit here and set this to one.

3:25

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now let's see what happens if we now click this link.

3:29

S… Speaker 1 (140. Passing Query Parameters and Fragments)

If we now click any link here,

3:31

S… Speaker 2 (140. Passing Query Parameters and Fragments)

you see we have question mark allowEdit1 here.

3:34

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So that's this key value pair we set up in this object.

3:37

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And of course, you could have more key value pairs here,

3:40

S… Speaker 2 (140. Passing Query Parameters and Fragments)

which would then be separated with the and sign in between in

3:44

S… Speaker 1 (140. Passing Query Parameters and Fragments)

your link.

3:44

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So that's the query params property.

3:47

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We also have the fragment.

3:50

S… Speaker 2 (140. Passing Query Parameters and Fragments)

property and that is only fragment because you may only have one fragment

3:54

S… Speaker 2 (140. Passing Query Parameters and Fragments)

here you could simply pass a string with single quotation

3:58

S… Speaker 2 (140. Passing Query Parameters and Fragments)

marks or therefore omit the squared brackets and set this

4:02

S… Speaker 2 (140. Passing Query Parameters and Fragments)

to let's say loading so if we now save this

4:06

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We go back to the service page.

4:08

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now you see we have hash loading at the end.

4:11

S… Speaker 2 (140. Passing Query Parameters and Fragments)

This is how you can add a fragment.

4:12

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So super easy to add in our router link here

4:16

S… Speaker 1 (140. Passing Query Parameters and Fragments)

in our template.

4:17

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Let's now see how we can do the same programmatically.

4:21

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So in our home component where we already have this load service button,

4:25

S… Speaker 2 (140. Passing Query Parameters and Fragments)

let's say we want to load server one.

4:28

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So here I will change this name to load server and pass one as an argument maybe.

4:32

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Adjust this method here,

4:34

S… Speaker 2 (140. Passing Query Parameters and Fragments)

load server,

4:36

S… Speaker 2 (140. Passing Query Parameters and Fragments)

and the ID will be passed as an argument as we just saw.

4:39

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And here I therefore want to navigate to servers,

4:42

S… Speaker 2 (140. Passing Query Parameters and Fragments)

pass the ID.

4:43

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We're already seeing how this gets more dynamic.

4:45

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now we're not hard coding five or something like this.

4:48

S… Speaker 2 (140. Passing Query Parameters and Fragments)

We're using this argument here instead.

4:50

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And then as a last argument,

4:52

S… Speaker 1 (140. Passing Query Parameters and Fragments)

edit.

4:52

S… Speaker 1 (140. Passing Query Parameters and Fragments)

Now again,

4:53

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we still want to add query params and this fragment.

4:56

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So here in the navigate method,

4:59

S… Speaker 2 (140. Passing Query Parameters and Fragments)

we use this object we already saw where we already added relative to.

5:03

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now I don't need relative to here.

5:05

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Instead here,

5:06

S… Speaker 2 (140. Passing Query Parameters and Fragments)

I can also set up my query params.

5:09

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And that again is then just a JavaScript object where we say allow

5:13

S… Speaker 2 (140. Passing Query Parameters and Fragments)

edit and set this to one maybe.

5:16

S… Speaker 2 (140. Passing Query Parameters and Fragments)

And just as I added query params,

5:18

S… Speaker 2 (140. Passing Query Parameters and Fragments)

I can also add the fragment here and set this to loading.

5:22

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now with this,

5:24

S… Speaker 2 (140. Passing Query Parameters and Fragments)

if we save this and we go back to our homepage and click load server,

5:27

S… Speaker 2 (140. Passing Query Parameters and Fragments)

you see we add the query parameter,

5:30

S… Speaker 2 (140. Passing Query Parameters and Fragments)

allow edit and set it equal to one and the hash

5:34

S… Speaker 2 (140. Passing Query Parameters and Fragments)

fragment here.

5:35

S… Speaker 2 (140. Passing Query Parameters and Fragments)

So that is how we can use query parameters and fragments on both the

5:40

S… Speaker 2 (140. Passing Query Parameters and Fragments)

programmatical routing approach,

5:42

S… Speaker 2 (140. Passing Query Parameters and Fragments)

calling it from the TypeScript code.

5:44

S… Speaker 2 (140. Passing Query Parameters and Fragments)

or on the router link like here.

5:46

S… Speaker 2 (140. Passing Query Parameters and Fragments)

Now let's also learn how we can retrieve the data thereafter.

140. Passing Query Parameters and Fragments

Qiyaas

Su'aal AI Ku saabsan this transcript