Passing Query Parameters to Route | Angular Route | Angular 13+

in this lecture you will learn what is a query parameter how to pass a query parameter to a route and then how to retrieve the value of a query parameter from the route so basically query parameters allows us to pass optional parameters like page number product name etc to the component so what is a query parameter query parameters are the optional parameters that we pass to a route and these query parameters are added at the end of the url separated by a question mark so for example in this url this id and this name are the query parameters okay so we specify a query parameter after the question mark now in the last lecture we learned about route parameters so what is the difference between a route parameter and a query parameter well the route parameters are required and is used by angular router to determine the route and they are part of the route definition so here in this route definition here we are specifying a route parameter this id is the route parameter so route parameters are the part of the route definition and these route parameters are required so for this route the value for this id parameter is required if we don't pass the value for this id parameter we will get an error but query parameters are optional parameters if the query parameter is missing in the url then it will not stop angular from navigating to the route and query parameters are not part of the route definition okay so this is the difference between query parameter and route parameter now let's understand query parameter with an example so let's go to our angular application here i am in the courses page now when i click on the show detail button of one of these courses we are navigated to the details of that course okay so here we are displaying the details of that course now what i want is let's say i'm the author of this course and i want to change the name of this course so in this page i want to have an edit button and when i click on that edit button this name should be updatable okay so as an author i should be able to edit the name of this course let's see how to achieve this functionality so let's go to vs code and let's open coursecomponent.html file here we are displaying the name of this course okay so after this h1 element let me add a div and inside this div let's add an input element of type text and let's bind this input element with this course name property so for that let's use two-way data binding so let's bind this ng model to this course name so let's copy this course dot name and let's bind this input element with that course name all right now let's also comment this anchor element here and let's add a button element okay and here let's say edit let's save the changes let's go to the web page so here you can see a text box and a button element has been added let me also provide some style for this div so let's simply set the text align to center save the changes again and now it looks fine all right now what we want is initially when the page loads we want to display the name of the course but when the user clicks on this edit button in that case this text box should be displayed where we can update the name of the course okay so what i'm going to do is inside the course component class i'm going to create a new property let's call it maybe edit mode it is going to be of type boolean and let's set its value to false so initially the value of this edit mode is false now let's go to coursecomponent.html and on this h1 element let's add ng if directive and to this let's assign this edit mode the edit mode property now what we want is when this edit mode property is false then we want to display this h1 element so here before this edit mode property let's use this not operator but if this edit mode is true in that case we want to display this div so let me copy this ngf directly from here and let's use it here and here let's remove this not operator with this let's save the changes let's go to the web page so you will notice that initially this h1 element is visible but the text box is not visible now if i change the value of this edit mode to true in that case the text box will be visible but h1 element will not be visible okay so we want to display this text box when the user clicks on this edit button so let's set the initial value of this edit mode to false and let's go to hostcomponent.html and here on this button element let's add router link directive okay and let's wrap it within square brackets and to this let's assign an array inside this array let's specify the path for this router link so it is going to be courses slash course okay and we also want to append the id so id we can get from this course object so here we can say course dot id okay so this will set the path for this router link now we also want to pass some query parameters for that we can use another directive which is query params okay and this is also an attribute directive so we can wrap it within square brackets and to this we can pass an object and inside that object we need to specify the query parameter and its value as a key value pair so here i want to have a query parameter called edit and i am going to set its value to true okay now if you want to have more query parameters then you can use comma and then specify the query parameter name and its value like this okay now here i only want to have one query parameter which is edit so i will remove this second query parameter with this let's save the changes let's go to the web page and here we have misspelled this router link so it should be router link let's save the changes again okay so the error is gone and just notice what happens in this url when i click on this edit button so currently it is displaying courses slash go slash the id of that course which is 103. now when i click on this edit button you will notice that that query parameter has been appended here so after this question mark we have this query parameter name edit and it is set to true okay so in this way we can pass a query parameter to a route now we can also pass a query parameter to a route programmatically let's see that also so i will comment this button element and i will add a new button element okay and on this button element let's find click event and to this click event let's assign a method and let's call this method maybe append query param let's go ahead and let's define this method in the component class so let's go to course component here i will create this method inside this method we want to use navigate method now we have learned that in order to use navigate method we need an instance of router class so let's inject an instance of router class here so inside this constructor inside the you know where we are specifying the parameters for the constructor let's create a private parameter let's call it router and it is going to be of type router in order to use this router class we also need to import it from angular router now let's access this router instance so we can say this dot router and on this let's call navigate method now to this navigate method again we can pass an array inside this we can specify the path the path for the route so it is going to be slash courses slash course then we also need to append the id of the course so we are storing the id of the course in this course id property so here let's say this dot course id then we can specify the query parameter as the second parameter for the navigate method so here we'll use object literal syntax inside this we use a property called query params and to this query params we again assign an object and inside this we can specify the query parameters as a key value pair so here let's use this edit so this is our query parameter and let's set it to true okay and again if you want to specify more query parameters you can use comma and then specify the query parameters as a key value pair but here i will keep only one query parameter let's save the changes let's go to the web page let's go back to courses let's click on this show detail button and here the route is courses less cosless103 which is the id of this course now when i click on the edit button it should append the query selector before this id so here i don't see this edit text here but still i will click on this button and you will notice that that query parameter has been appended after this question mark so in this way also you can pass a query parameter to a route now let's check why it is okay so for this button we have not specified any value so let's say edit all right so we learned how to pass a query parameter to a route now let's learn how to retrieve the value of a query parameter from the route so let's go to course component this course component class and again there are two ways to retrieve the value of a query parameter using snapshot property and by using an observable so let's first see how to access the value of the query parameter using snapshot property so on this activated route we have this snapshot property so let's say this dot activated route dot snapshot dot and on this snapshot property we can call a map and the map is query param map okay so this is a map which will store the query parameters as a key value pair now we can get the value of a query parameter by using this get method and to this we can pass the name of the query parameter so here the name of the query parameter is edit and this will return the value of this edit query parameter now let's store that value inside this edit mode property so let's say this dot edit mode equals this value so it is this dot edit mode and the type of this edit mode is boolean but this expression will return a string value okay so we need to convert that string value to boolean type for that let's pass this expression to this boolean constructor with this let's save the changes let's go to the web page let's open the detail of one of these courses and let's click on this edit button and let's see if this course name is editable or not so currently you can see this is the route now when i click on this edit button that query parameter has been appended to that route but this name is still not editable so why is that that's because we are setting the value of this edit mode property inside this ng on init and we have learned that this ng on init gets executed only once and that is when the component is fully initialized so when the component is initialized at that time this query parameter was not there right so let me go back to the courses page and let me click on the show detail button so when i click on the show detail button an instance of the course component will be created now in the route do we have the edit query parameter no we don't have so here this expression where we are setting this edit mode it will return this expression will return null okay and we are converting that null to a boolean type so that null since null is a false value that will be converted to false and that will be assigned to this edit mode and then when i'm clicking on this edit button this query parameter has been appended here but this ng on and it will not get called this time so the updated value will not be assigned to this edit mode okay let's see that let's say console.log and let's log this dot edit mode if i save the changes if i go to the web page let's see what happens so let's first go to this courses page let's click on this show detail of one of these courses and let's open developer console so you can see false has been logged here okay now when i click on this edit button nothing is logged here that's because this ng on init has not been called okay so now instead of using the snapshot property what we can do is we can use an observable so for that again on this activated route we can call query param map now this time we are calling this query per map on this activated route here we call this query paramap on this snapshot property so this query paramap returns a map but this query paramap returns an observable as you can see here and to this observable we can subscribe using subscribe method to this let's pass a callback function which will get executed whenever this observable returns a new value and inside this let's say this dot edit mode equals and here it will receive the value so let's call it param and this param is going to be a map so on this param let's call get method and to this get method let's pass the name of the query parameter which is edit let's save the changes and again we need to convert it to boolean type because it is going to return a string okay with this let's save the changes let's go to the web page and let's go to courses first then let's click on one of these courses okay so now when i click on this edit button so currently you see this is the route so the id of this course is 106. now when i click on this edit button you can see this query parameter has been appended here to this route and now this course name is also editable okay so since we have used an observable here since we have subscribed to an observable whenever the value of that observable will change that value will be assigned to this edit mode property so that's why using this observable is better approach now if the value of your query parameter is not going to change in that case you can also use the snapshot property all right so now our functionality is working as expected okay so when i click on this edit button you will notice that now this course name is editable let's do one more thing let's also add an update button so let's go to coursecomponent.html and let's add a new button element and let's call this button element update okay and on this button element let's bind click event and when this click event happens let's say we want to set the edit mode property to false okay let's save the changes let's go back to the web page let me close this console here let's first go to courses component let's click on the show detail of one of these courses let's click on edit and let's change the name of this course so just let's just append this test here and click on this update button so you can see the course name has been updated and the text box has disappeared and now it is displaying the course name the h1 element but here in the url we are still seeing this query parameter so what i want is when the user clicks on this update button the course name should be updated and this query parameter should also be removed from the url so for that what we can do is let's add this router link directive here and to this let's first wrap this router link within square brackets and to this let's specify the route as courses slash course and this should be within single quotes okay and then we also want to append the id of the course so let's use comma and to get the id again we can say course dot id okay let's save the changes let's go to the web page again let me go back to courses let's click on the show detail of one of these courses let's click on edit let's change the name to test1 let's click on update so currently this query parameter is appended here now when i click on this update name has been updated and that query parameter has also been removed from here all right so in this lecture you learn what is a query parameter how to pass a query parameter to a route and then how to retrieve the value of a query parameter from the route

Channel: procademy

Views: 24,247

Keywords: query parameters, difference between query parameter and route parameter, queryParamMap, angular, angular tutorial, complete angular course

Id: bnDc-t-sK-A

Length: 20min 36sec (1236 seconds)

Published: Fri Mar 18 2022