Get params from URL using inputs in Angular 16 | Enable withComponentInputBinding() in Angular 16

angular 16 has so many great features we have already covered angular signals in one of the previous video you can find the link in the description box also you can click on the link on the above card in this video we will talk about another great feature from angular 16 and this feature is what is the easiest way to read the values of parameters or query strings from the route in another application let's understand how it works before using this concept make sure you are using angular 16 you can find out the angular version by using this command this is NG version just hit the enter button and you will get all information about the angular version here it is saying angular 16 okay if it is angular section then we can create a new application and we can utilize or use this particular feature so let's quickly create a new application NG new I'm gonna writing URL demo hit on the enter button yes I want to add the routing in this application you can use any one of the CSS or scss file this will take some time to install the packages we have this brand new application over here let's open this application in an editor which is vs code in my case you can use any editor of your choice so let's just navigate to that particular folder over here and let's just open it by using this code space dot command this will open this entire folder in the code editor fantastic let's click on this terminal let's trust whatever we have in this folder click on this terminal new terminal and let's run this application so what I'm going to do is npm start here you can see the application is running on the browser this is the URL demo and this is the localhost 4200 let's remove some basic things from this index page so we can navigate to this SRC folder we have this app and we are having this app dot component.html so from this one let's remove some HTML so basically I have removed some extra things from this app component file let's see what we have on the browser let's remove this card as well I'm having some very basic things over here this is just the div for the toolbar and this is for the content if I go over here you will see you are having this angular and this is the welcome message and let's improve this one as well welcome to URL demo right you can give any mini pulling we have this value and there we go right now in this application I'm going to create couple of more components and I will redirect on those components by using the angle the routing and in this approach I'm gonna pass couple of values in those URLs in form of parameters and query string and we will understand how to read those values so for that concept let's create few components over here so here I'm gonna write NG g c let's say it is employee and remember the concept that we are talking about over here is applicable on Standalone component and for the module based component as well we are having this component which is employee let's navigate to this app routing file and over here let's define some path so here I'm gonna create One path for this employee so the path is employee and here I'm gonna write the component this is going to be employee component if I navigate to this app dot component file and over here if I create one link let's get a new link over here and here I'm gonna write employee and over here let's use the router link to navigate to that particular page which is employee in this case like this let's save everything and let's go back to the browser and let's see what we have it is not visible properly so let's take it back and put it over here on this content and if I will click on this employee link then you will see we are navigated to this particular employee URL and we are having the data from this employee works now I want to pass some values in the URL let's go to this app routing folder over here and along with this URL I want to pass some ID as well like this so what I will do I will use this employee URL and I will pass some Dynamic values in for map ID and the concept that we are talking about in this video is how to capture this ID in the employee component which is this one so basically I want to get that value of ID over here in this component and based on that value I can do my further operations so here let's say I'm typing employee and then this one click on this enter button then you will see we are getting this employee works let's update this value over here this is the employee and this is the one okay so here we are in this employee component so as for this New Concept you simply have to create a new input property over here in your component and just put the name which is ID you can also set the default value over here so let's import this input Quick Fix update it like this and we can display its value on the component file so here we are on this component file and inside this H1 tag I'm gonna just display the value which is ID like this and you can simply write it like this data from URL of ID is equals to this okay so first let's go in the browser and see we do not have any value over here now by default this concept is not enabled in angular 16 application to enable this concept of binding the parameter values directly to the input properties we have to enable something in the app routing file this is the app routing file and over here inside this providers we have to call one function which is provide router and in this provider router function as a first parameter we have to pass all our paths which is routes over here and we have to call one method which is with component input binding this is something that has been added in angular 16. if you are using this concept it means we are enabling or telling the angular application that you have to read the values from URLs and you have to bind them in the input property let's save everything and let's go back to the browser this time you will notice we are having this one over here if I will update the value to something else for example 45 immediately you will notice we are getting this value over here that's right something else over here see we are getting this value over here in the previous version of angulars we have to write so much code just to read the values in the component but with angular 16 this concept is very clear and very simple you only have to do two things first is just enable this concept in the app routing file and second is simply use the input properties in your component file now let's understand what will happen if I am having multiple parameters in the URL let's understand that concept also so over here we are having this ID and then let's say I want to pass the name as well right let's get one more input property for this name so here we are and let's just copy whatever we have over here paste it again and instead of using this ID let's use the name in the component file let's add one more here I'm writing name and let's use the name over here okay let's go back to the browser and over here I'm going to use this employee this first parameter is the ID and the second one is the name you can see that we are binding this one value to the ID and we are binding this native to this second one okay you can put any values over here and everything will work over here this is how you can get the values of parameters from route in angular application now let's understand what will happen if I am passing the data in form of query strings there are situations where we can pass the data something like this for example here I'm writing class is equals to top right I want to get the value of this class as well this concept is again very simple you simply have to create one more input property over here and just put the name which is class and that's it angular will bind the data automatically over here okay so let's just display this value also over here here I'm writing f class which is query string and let's use the class over here let's go back to the browser here you can see we are having this data from URL of class this is the query string and this is the value right if I am passing something else over here this is the Demi data and you can see we are getting it over here this is how you can use all of them over here but what will happen if you want to use these values in this component file you can do that easily also over here you are only having these values in this component file but if you want to just see how it will look like then you can use the implements over here and you can implement the own init right so this is own init let's just import it like this and we can implement it over here so this is something that I am doing this let's put it at the bottom side although it doesn't matter the position ID is equals to this dot ID let's display the values of all three variables over here and second one is name third one is the class let's go back to the browser and let's open the console window over here you will notice that on the console screen we are having all three values if I'm updating the value to something else for example here I'm writing 100 just hit the enter button you will notice you are having this ID which is 100 over here this name value is coming from the second parameter and this third value is coming from this query string and this is how you can use this angular 16 feature to read the values of your parameters and query string from the URL let me know your feedback about this feature of angular 16 in the comment section below feel free to ask your questions and share your feedback about this Channel and about all these videos thank you for watching have a great day foreign [Music]

Channel: Nitish Kaushik

Views: 254

Keywords: angular 16, withComponentInputBinding, url, get url data, passing parameter to route, Get params from URL, withComponentInputBinding() in Angular 16, bind route value to input, what's new in angular, what's new in angular 16

Id: 4Bc7rHcarOc

Length: 9min 57sec (597 seconds)

Published: Mon May 15 2023