Dependent Dropdown In Angular Using API | angular tutorial for beginners | Angular | Part 1

welcome back to Learning Partner so with this video I am starting new series where I will be focusing more on the logical part which will cover all the basic topic and why we need to implement the log okay so today we are going to see how we created problem someone may call it as a cascading drop down okay as you can see four drop downs okay so first is a select client so here we can show the client so here we can show the client values okay based on the client selection I should call the API and get the particular site of that compliance okay then I will show the sites here based on the site selection I will call the particular buildings of that particular site and based on the building selection I will call the floors okay so I have my I have developed some particular apis for this so this is the first API which will give us all the clients okay so as you can see this API returns an object we have message result and data and in data we have got the object this is one client then second and third okay so as you can see client that is 238 now next API is like on the change of this client drop down I should call the API to get all the sides of that particular client so next API is get on site by client ID so 238 that was the first client so you can see these are the sides we have of that particular client okay now if we see 191 is my site ID so again we have next API let's say 269 is another so here I can get okay let me try 191 yeah so for this particular site I have these number of buildings okay now for this particular building let's check like four floors are there or not so building ID is 225 yes yeah so we in 225 we have two floors let's make it 226 that is the second building yeah wait like yeah again we have yeah again we have one floor only in the 226. so these are the different apis we have so these are the different apis we have now same apis we are going to consume here so that it will be dependent okay let me show you the project structure this is just a normal project I have created again it is with the bootstrap sorry angular 15 and one component is created user in app module I have imported HTTP client model because we are going to make the API call and then forms module because we are going to buy bind the NG model okay so let's see now okay in the user component I have created four variables that is comment ID site ID building at the event ID site ID building a template respectively I have binded them with the NG model in the HTML okay now next thing is like on the page load we have to first call the client because remaining drop downs are dependent on the selection of the clients some of the clients so on the page load we just have to client you know we just have to call the clients okay so this is the API which provides all the clients information so the entity client object is already created let me create a function locate a function load clients okay here we need to make the API call please dot HTTP our appeal is gate so we have to use the gate so here we need to pass the API which gives us the client so this is the API so this is the API it should be in the string okay once we get once the API call is successful so we need to subscribe the result means success call freezer hold on any okay so we need to we have I have created a variable where I will be storing the clients so this dot clients is equal to now if you see the response the response of this API call is an object in in that object we have three field message result in the data in data we have the actual array so we need to use result to use result.data laser dot data okay and we need to call this in engineer that will be on the page load okay now once I get the clients I need to bind those into the option of first drop down correct so for that I will use NG for variable name will be clients and I need to bind the value as a property binding that will be item dot now if we check the apical we have a client ID whichever we have to buy and in to show the user we have to show item dot client name you just copy paste it okay so let's save and check it let's check the network map on the page load we should see one network give me a call let it compile okay so it is compiled successfully okay on the page load you can see get all like client API call is there and in the result we have got the data now if I see wait let me check the HTML again sorry my mistake I'll find that in this side yeah let's check it now okay so on the page load we have the EPA call and free check these are the various clients we have okay now next thing is like on the client change we have to hit our second API that is get all site by client ID okay so we have to write the change event on the first drop down so that will be over here change get slides back okay now we have to create this function [Music] again same thing will be there just API call will be different so this is the API call now ID will be dynamic so instead of 238 we just need to make it Dynamic that will be this Dot client ID okay because this client ID we have binded to our drop down okay so just like the client sorry we need to create one more array which will hold all the sides okay and this will be over here be over here let's check the paper call is there or not then we will bind the drop down okay so on the page load we have get our client once I change it yes so you can see 238 call is there if I change again to 39 call is there okay so on the change we are making the API calling we are getting the data also right so for the first client only I have the sites okay so this is one so here we need to bind it again property binding to the value because we are going to need the site ID so item Dot slide ID let's check the response also yes site ID is only there and we have to show the site name let's save and check okay so on the page load we have one apical that is get all client if I change it yes and that we can see here if I change it again Poonam ID services so you can see we have empty array same way as it is empty okay let me just push some record to the second site as well okay so let me just again change it back I have added some record to 239 yeah so here you can see now we have got these two from the puno mighty services and if we change it back together group I can see some more sites okay so we have done dependent drop down of just client and the site now on change of site also we need to call the building so again we have one more API that we need to buy so so event now this will be get building by site ID so let's create this function so this is how we create the dependent drop down okay we just need to pass the depend on parent ID so that it will be it will face the data let me just change it now to get the building by site ID we need to pass the site ID so this dot cited site that you will be here and we need to create one more variable which will hold the buildings so that will be buildings sign it it over here enter and same thing we can bind it to our for Loop also G4 and we need to find buildings over there item dot building ID will be there let's see the response yes building ID is there and to show it we will show the building name so item Dot yeah building name is so let's save and check it again on the page load we will have just one apical that is to load the parent drop down okay once we change it now you can see we don't have any sign once we change it to kedar group yeah so we have this much of site now if I change the side currently we don't have any building if I change the side but why people is not there let me save again let's try now foreign change so let's see okay again we have made the mistake this should be over here on the change of the side we need to call the building we have we have put it on the wrong line okay so once we change the client when API call is there which is calling the site on change of site we have another API call which is calling the buildings so you can see in this build in this side we have four five buildings let's change to apurva now we have just this let's change to Avalanche and we have this okay again let's change to crematoria and we have this okay so this is how we this is we have uh dependent drop down three level we have done now just the last one we will do it last one is on the change of the building we need to call Plus in that particular buildings change equal to double quotes get lower by building ID let's create the function again again it is totally dependent on your API like what what kind of API you have sometimes it might be you need to send all the three parameters like building a decided your everything okay it is again dependent on the your API building but basic concept will be same on the change of it we need to call the data of the next drop down so instead of building it will be now floors let's assign the flowers in the last function and let and let's bind that to the last drop down to the last program you can just copy paste to set the time okay because now if we check the last apical we have we have got floor ID and to display we have to show floor number let's save and check now okay so on the page load we have guitar client once we change kedar we have got the site of the particular kedar group once you change the site we have got the particular buildings from that build site okay let's change our a block so we have got floors or one two three let's change our B Block okay so only in the block blocking we have the floors remaining we don't have it okay so this is how we create the dependent drop down hope you have all got the topic now the API might be something else or if you have the static array you just have to use the filter to filter out the data okay but the basic logic is same okay so in the next video we are going to see another topic which will be morally focused on the logic building so till then please do subscribe and like the video

Channel: LEARNING PARTNER

Views: 19,712

Keywords: Dependent Dropdown List In Angular, Cascading Dropdown List angular, Dependent Dropdown List angular, api call integration, crud angular, Angular 15 tutorials, angular tutorials, Data Binding in angular, angular 12 tutorial, login functionality in angular, angular tutorial, angular tutorial for beginners, angular interview questions and answers, angular project, angular 14 crud localstorage, dynamic dropdown in angular, dynamic option in dropdown angular, angular 17, angular

Id: ncMO1Lt7b6g

Length: 18min 43sec (1123 seconds)

Published: Mon Jan 09 2023