Angular Primeng Dropdown with or without filters

hi all in this video i am going to explain how we will use a drop down using a primary g so it's more about the primary library drop down so just come to priminji website and when you search for a drop down here you can see all the documentation so there there specifically saying we have to use angular cdk version so in your application you make sure that you have already installed angular cdk else it won't work okay so you can go to the package.json of your application and make sure it is there angular ctk is there after that in order to use a drop down you can simply import a module of primary called drop down so you can import this module from the prime nj drop down so go to the app.module.ts if you are using any lazy loading of or if you are using planning to use a drop down html inside any other component html if any module is associated for that html please import primary drop-down in that module instead of app.module.cs okay here i have only one uh module and one component.html so i am planning to use p dropdown inside the app.com.html so you can import that in the app.module.ts so i am importing sorry i am importing that from the primary dropdown module and i am using this dropdown inside the imports module then it will be automatically imported for the primary dropdown so this alone won't work so you have to include browser animations module also for working primary doctor so for that you have to import browser animation so you will get that particular name from when you go to this particular website and when you click on this uh link okay you will get the stack uh with uh example so from that there you will get a link so you have to import that okay browser animations modules you have to import from the platform browser animations and you have to refer that inside the imports module so these two uh modules are required for making a drop down work in prime engine okay after save let's assume you have an end point which returns a list of data which needs to be showed inside a drop down so i have just created a dummy json with different labels and all different fields are there inside that json so what is my requirement is like i have to create a drop down inside the dropdown i have to show the name and the email so when i select a name email id should be passed to the backend something like that i have a requirement so i have to show all these data and set a dropdown so how i will do that so just assume that this is an endpoint this is an api from your end so i'm just calling a services for getting those uh dummy data from for me for your case it will be an api then after i am getting all those details so in the component.ts i am calling that particular service and i am getting the data in the response response file so what i have to do is like i have to pass this array of data to show in the drop down and i have to pass the variable into the html okay so i am just mentioning it as a user list equal to response i'm not i didn't declare a variable yet so i'm just declaring it user list equal to an empty array i am saving it so in the user list array i have all the data i need to show in the drop down then using primary you can see we have an a prime and gp drop down and in the options we will specify all the list of data maybe it will be an object array or it will be singular mainly it will take a object array so ng model we will have an ng model when we select any data from the array of data it will be stored in the selected city and this i will explain you further on that okay so here options will be all the data so all the data which i need to show in a drop down i have stored in the user list so i am just making the options as the user list in g model it will be a selected user i didn't created a variable yet so you can create a variable there use a list equal to just assume it's a simple string by default okay so here we have an option label name what is option label name so just assume you have an array of object so what is the data you have to show to the user inside the drop down that will be the label okay that label will be the name here for my case i have to show the users the options as these names as the options i have to give so i have to what i have to refer as like option label name okay then sorry i have missed one single opening uh less than simple and after selecting it you can i can show you what it is happening now i have run the applications you can see all the data will be shown here okay so if you are thinking like if you want to show the mail id instead of the name what you have to do is like option label instead of name you can give email id you can see then user will see the email id instead of the name the same way whatever uh data we have to show to the user that will be come into the option label so it will be objects um it should be an object array and you can show this way i'm just changing back to name then just i am just for showing purpose i am just showing the data here okay selected user so when i select a particular name what will happen what is the data which will be stored in the selected user so it will be initially it will be an empty when i select a particular data okay when you select a particular data you can see it will be override the value will be object so just assume you don't need a value of object while i select a data you only have to show a email id as the value so what you can do is like there is an option called option same as a value we have an option called value equal to then this is a name just assume that i have to pass uh to i have when i select a particular option i have to get the email id instead of a name or instead of a full object then you can specifically mention option value you can see that it will be automatically show like this way so you also notice one more thing so by default it will be joe hendrick will be selected and the value is empty actually it is not selecting whatever the value coming first it is just showing you that is actually not selecting for avoiding that you can put a placeholder also so i'm just putting a placeholder equal to select user you can see by default it comes a select user when i select one name it will be automatically uh that email id will be shown to the user okay this is the basic behavior of angular uh primary dropdown and one more thing just assume you are i'm just overriding this name and email id with a label and value variable okay so i am replacing the name with a label and email id with a value so if this is the case for example whatever the json coming from the vacant as an options so label is the one which you have to show to the user and value is the one which when we select a particular value if the value should be like this way and if the key is label and value do you do you do not have to specifically manually mention this option label and option value so when i save it you can see automatically it will be understand label is there this one and value is this one so you don't have to specifically if it is uh other wave is if it is a different key other than the label and value you have to manually mention option label equal to this one and option value equal to this one and if you don't want to mention option value it will be it will be selected value full object array you will get this full object array that is uh primary drop-down so you you have a different options also so if you this is a template driven and if you want to use ng model you can use a formant form control name also you can use it so it is very simple only and we we have another option uh right so if you want to uh you know show some of the fields as the disabled okay so from the backend list if you are giving an active status or any variable so based on that also you can you will be able to disable for example so in your response if you have a value called inactive any variable okay any variable which is true or force and if you mention option disabled to that variable then it will be automatically disabled so if i have a five elements if you want to disable two elements in that particular section if you pass a true inactive true or false something like that it will be automatically enabled and disabled so we have a many different options you can see model driven forms also there here and also if you have to show a custom content so you can see if you want to show some custom content also it will be very easy in you by using primary so you have to just mention a ng template so why after selecting what will be the design before selecting when a user click on the particular drop down so all the options designs and the selected after selecting what will be what it should be shown for example so this this will be the one egypt with the flag so after selecting also if you want to show the same uh icon and egypt that that is what it is mentioned here then virtual scrolling is also there so different animation configuration so if you go through this tutorial uh you will get more idea about it and it may be in some of the dropdowns you can see uh this primary uh this primary drop down uh instead index issues will be there so you have an option called defend index basis index also we can set so different options are there so which is very easy for you and if you want to enable you know filter options as well so that is also available in the primary dropper for example if i give a filter equal to true let me check the correct option you can see when we do a filter so you can here you see a filter of option is also available so if i type something so implementation wise it is very easy uh for implementing all the options is available inside the primary dropdown it is very easy if you are using this primary dropdown so and also if you are if you want to trigger any particular function on click on change on filter on focus so many options are available inside this primary dropdown so that is all about um primary dropdown hope you understand

Channel: Learn from Scratch

Views: 17,497

Keywords: dropdown primeng, dropdown primeng example, primeng filter, primeng onchange, primeng 12, primeng dropdown not working, angular 12, primeng dropdown, angular primeng dropdown, angular dropdowns, primeng library examples, angular primeng dropdown setting default value, primeng dropdown Default select option, primeng select dropdown, Change the primeng dropdown template, primeng dropdown label value, primeng dropdown not showing, primeng dropdown animation module missing

Id: ATS-QG060sI

Length: 14min 43sec (883 seconds)

Published: Sun Dec 19 2021