How to navigate with query params in Angular 17?

hi everyone welcome back to our Channel aast today we are diving into angular 17 specifically focusing on navigating with Cy parameters if you have ever wondered how to use Cy parameters to enhance your apps navigation you are in the right place so let's get started cury parameters are powerful way to pass information between routes in an angular application they allow you to modify the state of a route without changing it path this is especially useful for filtering data pting lists or maintaining the state of a form first let's make sure you have angular 17 installed if you have not installed it yet you can do that with this command npm install DG at angular SL CLI at latest so once that is done you can create a new angular project by using this command Ng new cury params demo you can give it whatever name you prefer once that project is created you can go to that folder by using CD cury params demo that would be the project name that you chose during creation of your project so once you are in the folder of your project you can run the command NG Ser okay I already have created my angular project that is currently opened in my editor vs code so this is just a basic starter angular project with nothing but just hello world message in the app. component. HTML I'm using angular 17 here so let's start the server by running the command NG serve in the root directory of your project press enter okay the project is now running on this port so just click on that link and you will see your output here in the browser now let's generate two components a list component and a detail component NG generate C list and and use the end end operator and use NG generate C detail so this single line will create two components actually we are basically concatenating two commands in the same line so when we will run it it first this command will be executed and once that is done then it will move to this command okay press Center so these components will help us to demonstrate how to use the query params in our app next we need to set up our routes so if you're using the older versions of angular then older than 17 then you may have the app- routing. module. TS but if you don't have but if you're using angular 17 or latest than that then you may have the app. routes. TS file so if you don't have this file in your project yet then you can create it and then you will have to register that file in your app.config dots file in this way so this is the method in angular 17 to do this you have to provide the router and pass the routes that you defined in the app. routes okay so let's start the configuration of our routes in this array I will pass three objects first one would be for the list second would be for the detail and third one would be the empty path that will redirect us back to the list okay so let's do that so here let's add the path with the list and component would be the list component make sure to import the list component and now let's add another route path and here I will add the string detail and component would be detail component okay in your case maybe you are using the module tools or maybe you may want to Lazy load this component in that case you may want to use a different property that would be load children so in that case you must have to create a module for that component so that you could load it lazily in this okay so let's R it back all right make sure to import this component as well so after that if you are using routes then you must have to add the router Outlet component in your app. comp component. HTML okay so router outlet has been added so this sets up the basic navigation between our list and detail component now let's modify the list component to navigate to the detail component with the query parameters first update the template in the list. component. HTML so let's open that and here I will add a div within div I will add the h2 tag and then I want the UL tag and within the UL tag I want the list tag okay press enter our basic structure has been generated by the vs code now in the I2 tag let's add some text item list and in the list tag actually we have to use the for Loop here so let me wrap it with the AR nested inside the for Loop in this way so this is also the latest approach of angular in the latest versions you can use the for Loop in this way as well so in this let's use the let's define the variable item of items and we also need to use a track item. ID okay now uh within this for loop I can simply add the list tag and within that list tag I will print the name of every item item do name all right okay now I want to register The Click event on every list item so for that let's add the click and then I will call a function that we will Define shortly go to detail and we will pass the current item. ID from this Loop okay now let's update the typescript file list. component.ts to Define all of these missing variables and function okay so here I'm going to add a property items is equal to empt array and within that array I will pass three or four objects like this or you can add more but uh we should also add the ID as well because we are using in the HTML so let's do that now I'm going to add more items all right I think that's sufficient now I need the router service in my component so for that I need to inject it you can inject in two ways first method is the Constructor you can use the Constructor approach or you can simply use the inject function so let me Define the variable to save the router class or service in it and then import the inject function from angular / core if you're using vs code you may have the suggestion if you just click on that your inject function would automatically be imported in the Imports section now here you have to pass the service that you want to inject I want to inject the router so select the router class that you want to import and you will notice that it is imported as well now below this array I want to define a function go to detail and that would be expecting the ID within the parameter and now we will use this do router. navigate and I'm basically calling this function and this function is expecting an array so let's pass it array and I will pass the route that I want to navigate to so this is the detail and after that I want to pass the cury parameters as well so for that I have to pass the second argument in the navigate function that would be an object and within that object we have the option our property cury perams and cury perams property will expect an object and in that object every property will be will become the Cy parameter in the URL so for now I just want to pass only one Cy parameter so let's pass it so I have passed the ID and the value the property name is ID and the VAR variable name is also ID so I'm using the short form of this so you don't have to use this so this is redundant so we should just keep it like this so this is short and easy to type anyways so now when an item is clicked the go to detail method navigates to the detail component and passes the item id as the query parameter so let's try that in the app route I should have added another path so if you are in the route at that time there nothing would be displayed because we are not on the list route so either we would have to manually type the list in this way or we should add another route in the routes file so that it could automatically redirect us to the list page if nothing was provided in the URL so for that I will add the path empty and this will automatically redirect to this route now you would notice that whenever you will try to access the route it will immediately take you back to the list route okay and if you click on any of these then it will show you the detail component now let's retrieve the cery parameters in the detail component so go to the detail. component.ts and here we first of all we have to inject another service that would be the activated route so let's define the property route is equal to and make sure to import the inject function and give it the activated route class to inject now we need to implement the NG uh on init life cycle hook and we have to implement this function as well also we have to define the variable item ID and the type would be number and we can make it optional so that it don't complain about the missing number otherwise typescript would be saying that it will be complaining that the property item id has no initializer and it is not definitely assigned in the Constructor so it was expecting that in the Constructor you will assign something to it because this is compulsory so I will make it optional in that way it will not complain about the missing value so by default the value of this property would be undefined now in the Eng init I will use this. route. quy params and this property would provide me an observable that you can see in the suggestion as well so now you can subscribe to this observable so let's use the Subscribe function to it and now now you have to pass the call back function that would receive the params parameter so let's write that perams is param so in the in the call back function we will just get it by using this do Item ID is equal to params do ID now we are getting another error that is saying property ID comes from an index signature so it must be accessed with this syntax so for that let's change it in this way use the square brackets and pass the property name that you want to access from the URL so in the NG on init method we subscribe to the quy params observable to get the item ID from the URL finally let's display the retrieved Item ID in the detail component so let's open the update detail. component. HTML and here I will add a div within that div we need h2 tag and then we need a P tag so press enter our skeleton is generated now let's type the text detail View and in the P tag I will pass Item ID and let's print the property item id save it let me remove this extra bracket okay now in the detail view you can see the item ID is visible okay if you make a change maybe this ID it would be visible let me add a go back button here that will take us back to the list page okay so there are two ways to go back to the previous page one is just use the router service or you can use the location service so in this I will just use the location service so for that we have to inject the location service as well location is equal to inject and make sure to import the location service from angular / common click on that save it and now in the Gob back function I will use this do location Dot back save it and now let's test it click on the back button and you are on the list item so let me click on this go back click on this and you can see that the relevant item id displays whenever you click on any ID okay one last thing that I would like to show you that here we are using the router service to navigate there is another way to navigate you can just use the directive in the HTML to navigate as well so here I will just add the router link directive and here I will pass the route path detail and also we need to pass the query parameters so this is how you will pass the query parameters specify the directive name and wrap it in the scare brackets and here you can pass an object and you will pass the property name that you will pass in the URL and this is the value but it nothing will work yet because it is not a property of list for that you have to import the router module in the Imports array we are using the Standalone component here so that's why we can directly import the router module here okay so first of all we have to remove the click event and now you can see we don't have the click event on it but it will still take us to the detail page and it is still passing the query string variables and you can pass any extra variables as well like here XYZ a see so now if you go back click on the item two you will see that that extra information is also going there so as you can see clicking on an item in the list takes us to the detail view with the correct item id displayed this is how you can use a quy parameters to enhance the navigation in your angular application that's it for today's tutorial we hope that you found this guide on navigating with Cy parameters in angular 17 helpful if you did then don't forget to like comment and subscribe for more angular tips and tutorials thanks for watching and we will see you in the next video

Channel: AyyazTech

Views: 301

Keywords: Angular 17, Angular 17 Navigation, Angular Best Practices, Angular Components, Angular Development, Angular Navigation, Angular Programming, Angular Queries, Angular Query Params, Angular Routing, Angular Tips, Angular Tutorial, Frontend Development, JavaScript Framework, Navigation Tutorial, Query Parameters, Query Strings, Routing Parameters, Web Development, Web Navigation

Id: 8xKaiatrzBI

Length: 15min 34sec (934 seconds)

Published: Fri May 24 2024