fetch

Angular query params



Sharing buttons:

they say is part 51 of angular cloud

tutorial in this video we'll discuss

query string parameters in angular

creating and reading query string

parameters is somewhat similar to

creating and reading optional route

parameters we discussed optional route

parameters in parts 43 and 44 of this

video series notice in this URL we have

two query string parameters search term

and test for a query string parameters

in the URL start with a question mark

and if we have multiple query string

parameters they are separated using an

ampersand query parameters are usually

used when you want the parameters on the

route to be optional and when you want

to retain those parameters across

multiple routes just like option road

parameters

query parameters are also not part of

the route configuration and therefore

they are not used in route pattern

matching now let's understand query

string parameters with an example at the

moment we are on the list route let's

search for a specific employee notice in

our filter list at the moment we only

have one employee and that is John when

we click on John's panel right here it

takes us to John's details and at this

point when we click this button back to

list it takes us to the list route but

notice we have lost of a search term and

the filter list is also lost what we

want to be able to do is when we come

back to the list we want to retain that

search term and the filter list there

are several ways to do this one way is

by using query string parameters at the

moment we are on the butan plate of our

list employees component and whenever we

click on any of these panels this is the

method that is called on click enter

this method we are passing the ID of the

respective employee and we have this

wrong click method with no component

class right here so when we click on an

employee panel we are navigating the

user to the employees route passing it

the employee ID now what we want to do

is pass the search term also in the URL

as a query string parameter so our query

string parameter should look

like this so query string parameters

start with a question mark and then the

name of our query string parameter here

is search term and the value for that is

whatever search term that we have typed

into this search by name search text box

to pass query string parameters in code

we pass a second parameter to the

navigate method and that second

parameter is an object the key for this

object is query params and the value is

another object this object contains our

query string parameter key value pairs

you can have as many query string

parameters as you want one of the query

string parameters that we want is search

term so the key here is search term and

the value for this is going to come from

the search term property that we have in

our component class now remember this is

the property to which our search by name

textbox is binding to notice here we are

using to a data binding so the value

that we have in that property we want to

pass it as the value for our query

string parameter let's include another

query string parameter I'm going to name

it test for an and I'm going to

hard-code the value for this test value

so this is how we pass query string

parameters in code but what if we want

to pass them in HTML in HTML we use the

query parameter active notice in this

example right here we are binding the

query params directive to an object and

this object contains the query string

parameter key value pairs and the

resulting URL will look like this now

let's quickly test this change that we

have just made so on the list route

let's search for John and when we click

on John employee panel people to John

details and notice in the URL we have

both our query string parameters search

term and test param

at this point when we click this button

back to list notice on the list route in

the URL we have lost our query string

parameters that's because by default

we're history parameters are not

retained between different routes to be

able to retain them we have to

explicitly configure and the way we do

that is by using query parameter active

so in our case when we navigate from

employee details component to the list

route we want to be able to retain the

query string parameters so let's use

this query params handling directive so

within the view template of our employee

details component here is the HTML of

that back to list button so in addition

to this router link directive let's also

use query params and lling directed now

the value for this directive can either

be reserved or merge well discuss the

difference between the two in just a bed

for now let's use preserve now let's do

another search navigate to employee

details in the URL we have our query

string parameters at this point when we

go back to the employee list notice now

our query string parameters are retained

as expected now let's understand what

merge is going to do so let's change

preserve to merge now what this is going

to do is if we have any new query string

parameter here that we are adding when

we are navigating to the list route that

new query string parameter will be

merged with the already existing query

string parameters now to add a new query

string parameter in the HTML we use

query parameter active and bind this to

an object and this object is going to

contain the key for our new query string

parameter let's name it new param and

then a value for it and let's set the

value as new value now let's search for

another employee navigate to Jones

details notice in the URL we have search

term and test param those are the two

already existing query string parameters

and now when we click this back to list

button will be redirected to the list

route but

and here we are also added new query

string parameter new param so this

parameter will be merged with the

already existing query string parameters

search term and test param so notice

when I click the button in the URL in

addition to the existing query string

parameters we also have our new pair

emerged now if we have said this query

parameter active to preserve instead of

merge then this new query string

parameter that we are adding here will

not be merged with the existing query

string parameters we will only have the

existing query string parameters

preserved but this new query pram will

be lost when we navigate back to the

list route now if you want to preserve

query string parameters in code we pass

an object as a second parameter to the

angular routers and navigate method they

key within that object is query params

handling and the value can either be

preserved or merge depending on your

project requirements now let's search

for Joan again navigate to his details

in the URL we have those two query

string parameters notice here we have

this button view next employee when we

click this button it takes us to the

next employee and when that happens we

will lose these query string parameters

in the URL that's because we have not

configured this button to retain the

query string parameters so notice when I

click the button we have lost the query

string parameters we have this button

within our employee details component

right here when we click this button

this is the method that is called we

have this method in our component class

right here when we click this button we

are navigating to the next employee now

what we want to do is retain the query

string parameters so for that to the

navigate method we are passing an object

as a second parameter and the key for

this object is going to be query

parameter on dling and the value for

that can be either preserve or merge

let's set this to preserve now let's go

back to the list route search for an

employee navigate to his details we have

the query string parameters in the URL

at this point notice when I click the

button

we retain the query string parameters as

expected query prams handling directive

is introduced in Anglophone if you're

using angular 2 you wouldn't have query

parameter active instead you will have

to use Brazil query parameter active

preserve query params directive is

deprecated since angular 4 so if you're

using angular for or later versions then

use query parameter lang directive if

you're using angular 2 then your only

choice is to use preserve query

parameter active in our project a using

angular 5 so if we type query here

notice I see preserve were Abraham's so

if we go to the definition on this

property

notice it is deprecated since angular

version 4 so far we have only discussed

how to pass query string parameters and

retain them across multiple routes we

have not discussed how to read query

string parameter values when we search

for an employee and navigate to his

details we are passing the search term

as a query string parameter but when we

go back to the list we are not reading

that query string parameter value we are

not populating the search by name text

box and we are also not filtering this

list

well discuss how to do all these in our

next session that's it in this video

thank you for watching and have a great

day