assalamu alaikum everyone i'm back with another video and today i'll be telling you some of the stuff in which most of the people have some doubts in that so after watching this video i'll you will have all the clear ideas and misconceptions which you have it will be cleared so let's get started what is the main criteria about this widget i'll be making one widget so that widget will have two options one on clicking in one option this widget will be visible and on clicking in another option this search widget will be visible ok so how do you do that and the communication between HTML server client and the calling part and the displaying in the HTML will all be handled in one widget so let's get started so the name I'll be giving is option control widget ok and ID ID is not needed actually so I'll save this now I'll open in it in the editor so because I want one select box and there will be two option so first I need this layout okay the panel which I have already written in my previous video if you see so I'll just copy this part till row okay and I'll paste it in the option table okay so I'm over here I'll give select widget with select widget with options Search Widget okay I'll do search widget with option that will be better search widget with options okay now so I'll be needing two options okay so how do I get the option so I need to define the option in server script okay so I'll define it here I'll give data dot option options one okay is equals two so inside this array I'll define the option name and ID two things and I'll pass it in the HTML from where I'll get the ID as well as the value the name of the options and I can displace display it in the widget so first I will do ID so the first will be my state any name you can give and I'll give name incident state okay so this incident state will be visible on clicking of this option okay now the next one will be don't forget guys over here I need a comma the next option I will give as search okay and name will be incident search okay so this was my option partner okay now the thing is I need a select box in HTML okay so after this row I will write the column and take a column okay well I'll give select class select class is equals to I think so I need to write a CSS fourth for this select box because it is not there and ngmodel where I need the ID okay is equals to data dot value on selecting of this option I need the value okay now I need I will give ng change ng changes actually okay I'll give okay first I'll show you and then I'll write energy change so over here I'll give option so there are many cases like over here also you can be fine and give option like two or more options we can give but I am doing dynamically by just mentioning here and pulling it here in HTML part so that is more appropriate I think so where you can use ng repeat because this array using this area because there are too many options so option in theta dot options one okay why I have taken option is like I okay Angie rip it is like for loop okay so option in means I in this okay so this part the state part will be my zero means this one is my zero and this my is is one so I in zero and one means first it will run with this state and then with search I hope this is clear to you and if not then you can just go to w3 school and you can get them get it okay now value is what value is option dot ID because this is option okay I am taking the ID from each loop from each iteration okay so this is the option now what will be displayed here displayed will be option dot name the name which I have defined okay just save it okay I need to write the CSS as well so I don't think that anything will be visible right now because it was hasn't been defined okay we can still we can just see so were your it is coming but okay we can leave like this also if you want you can define you can live like this as well okay so have you noticed one thing guys the one thing is over here in the initial time it is coming blank okay and after selecting if I select any one option then that blank is not visible so to remove this type of thing what we will do we will give ng initialize we will initialize over here with the value okay so this is my ng in ich in it is used this is actually all about angular JS so data dot value equals to data dot options add 0 dot I D and if I just save okay it is not I just remove option to the reaction I think so still it is not removed okay so one just a minute sorry okay yeah I it was by my mistake my bad option one at zero because over here I have given it at all options one so so now as you have got it like how to remove the blank values from the Select box now my point is over here I need to call it line script okay on selecting of this and I will pass the value in the crime script and then I'll show the widgets these two widgets so I'll continue this in my another video I want you guys to try this out in your personal instance okay and wait for my another video so that will get the whole widget that's it guys thank you