Transcript for:

so welcome back to Learning Partner so in this video we are going to see Prime like how do we use Prime in our angular app what is the use of uh going for the prime Library what components they have how do we use each component what some of the components we will at least try to install and use those correct so when we talk about angular we have let's say Prime is the mostly used then we have AG grid also which is dedicated for the table only material is also there then NX is also there uh again I think um SN Fusion is also there so many other libraries are are there which has so many components which we can use in our angular app let's whyde we need need this kind of component as in let's say talk about the calendar so here you can see this is the calendar UI they provide but if you use input type Tes we get the basic calendar which is provided by the browser correct then so many graphs are also there mostly tables so let's go to their components get started component table is the most thing what we use so in data you will see the table so let's say we have a table and we want to add a filteration pagination searching sorting everything so how much code we have to do if we have to do that by custom code so much of code we have to do but rather than doing all those kind of code if we still able to manage that code still there will be so many scenarios left which might break but if we use their table so let's start from that so first page inor so see we get the pagination like this number of Records also we can select then if we have to add a sorting so you can see sorting also we can add then filter a single Tex box will be there and on the table columns also we can get the filters row selection single selection multi selection what not so many things are there correct expandable row let me show you the expandable also this is how you can expand so so many things are there which you can easily Implement if you use the library if you have if you implement the same thing if you try to write the custom code and Implement all these things it will take so many days to achieve this but if you just install the prime engine and you you can use their components so when we talk about priming there is a free version also and there is a paid version also premium template correct but most of the things which we need are free only so we can use it now first is like how do we install it and how do we use it so you just have to go to the getting started and installation so this is the command how do we install it so again there are so many versions just like angular is releasing versions by versions so just like that Prime team is also keeping up with them correct now what I have done is like uh basic angular 17 in my system I have 17.3 so you can just create a project by NG new and the project name so you will get this default project created so it has a 17.3 version and if we see the SRC folder we don't have app model because in the latest architecture of the angular 17 we do we don't have app model it is an app config now now in this project I need to install my Prime engine so what I will do I need to copy this command npm install priming I need to open a new terminal so one click of plus new terminal will open over here we just need to paste this command and enter so what it will does it will install the Prime in our angular system and once it is installed now it will add an entry over here also just make sure you pay attention over here in the dependencies prime Library along with whatever the version we have installed that will be added over here so see Prime entry has been added and the latest version 17.1 15.0 which is added so first thing when we have to use priming we have to install that once you install second thing is like if you go to the documentation also you need to add this kind of thing in the style section in angular D whenever we use any library now their website will be well documented how to use it what are the parameter what are the output input so many things they will provide very properly so this two links when to add it into our angular.js so let's open it here you can see style section is there so here you need to add it once you make any changes to the angular.js make sure you are running your application again so this was already running so I'm stopping it and I'm running it again so we have installed the priming we have added the links of that in angular.js two steps we have done now let's close it work is done now let me just create a folder over here uh sorry let's create a folder to store the components we will try to use some of the components from Prime NG let me create a user component NG generate component user so it's an angular 17 by default if you create any component it is stand alone so it won't be added it anywhere so you can see only four files has been created let's create another component let's make it add user enter so in component folder we have have created two folders let's create the routes also so AB route. TS is there PA sorry let's see user list component but still it is loading user component this is the first route then second again path new user component what is the component name we have given add user yeah so add user so we have created two routes let's go over here this is what the default code we get let's get rid of that uh one thing I will need bootstrap also ra rather than bootstrap let's try to use their nowar so do they have the naar or not let's check it they should have a naar menu so let's check what is their menu bar this is like this menu let's try to use the menu bar so see now instead of using bootstrap nowar we are trying to use the nowar what they have provided so if we go to menu bar what they are saying you if you need to use the menu bar you need to import this module so let's copy this now in which component we have we are going to add the menu bar so in app component so in app component.ts so since we don't have app module so if you are working on the older version now make sure you adding that in the app moduel so here we need to add it so menu bar model and in the import section you need to add correct so first thing whatever the component you are going to use you need to import that moduel so we are using menar so Manar import module we have added then how we have to use it everything will be provided over here so see you can see the whole code also toggle full code uh this is HTML code so let's copy it we don't need the card so or let's use the card also let's see how does it look now in HTML I will put it and now here it needs the variable so they will provide the variable also so here this is HTML let's move on to this so here you can see item they have created let's copy in our TS let's create the variable menu item so from where they have taken it so from Prime API so let's import this also now what they have done on Implement on in it they added the menus also so On in It Implement on in it just like that I'm not doing anything whatever they have done just like that I'm following so that you will also understand you don't have to do anything or you you won't face any error if you follow the steps what they have provided I me NG on in it they have just provided the Valu so let's copy let's paste it over here that's it so let's try to save all our application is running so let's open Locos 420 property that title does not exist yeah so error is gone so here you can see B by just using that we are getting the main correct so whatever we have seen over here same output we are getting we we have just followed the steps what they have provided now let's change the menu little bit so let's say first menu will be let's say where we don't need let me just see if we have the normal menu where we don't need the sub items it is [Music] there how you will redirect we selected that but how we don't have router link right let's check we selected a different something which doesn't provide this menu is not actually suitable for nowar kind of thing where do we have it anything they have this this also we cannot use okay let it be so first component we have tried to show the menus like this okay just the component we have tried now let's just get rid of this now we have created two route now first let's navigate to the user so SL user list okay so this won't be opening because we have to add the router Outlet so let's add a router Outlet over here now here you can see user work is coming so now in user list first we will start with the basic so let's see you know the normal drop down correct so this is the drop down so by using our normal select we can create a drop down so this is a normal drop correct this will look like same what we used to create but can we add a filter in our dropdown or can we make this editable also see after selecting I'm able to edit this also we can group this also in Germany these are the city in USA these are the city again you can provide your custom template also image plus text then filter here you can see it is it is allowing us to filter also so let's try to use this how do we use that so first thing whenever you open any component now at the top they will provide the input like what what input you need to use so I will just copy this import now let's move back to add user so here first we will add the import and this will go into our import section now let's just create a small form all three here I will say okay we didn't install the bootst prime M also they will have grid let's try to use their grid [Music] panel let's search it grade how do they create I'm also not sure like they have the grade or not let it be let's create a normal table PR TD and I will just add a style 100% weight now in first what we are going to do is we have to use the drop down okay so where it was drop down and drop down should be searchable so let's go over here custom compter we need the basic one now yeah so let's start with the basic so after importing the module next thing this is their selector now when we talk about angular component these are nothing but the revisable component how we create the revisable component by using input and output just like that they have created their own but they have put that in the into the library and you are using their component so whatever just like how you use this selector just like that their selector will be there for drop down they will have p drop down when we create our component we will start a name with app component just like that correct so we don't need NG model model for now so let's get rid of that Now options so this is their reusable component and this reusable component has an has a input that is option and option we need to pass an array so let's see how they have passed the array toggle code let's go tots so here you can see we they have created a variable and uh interface also is created so let's just copy it is they have created an interface so let's use that then in the Constructor we will initialize the values or same value we can pass it while initialization only so equal to this okay so while initializing variable only we are providing the value let's format it back so we have created an array with some data type interface uh and we have stored some Val and this array we have passed over here as a options like what what options I need to see in my drop down so let's just save and let's move back to our second route that is new user correct so now here you can see now you will face an error so see it is not opening so we might have an error so let's check what is the error so here you can see it is saying like browser animation is not present so once we click on it now some animation happen and then that D get displayed so now this should be there to use the animation so let's go to our component and here let's add a browser animation let's copy let's paste it over here why I'm not able to copy we need to put it over here now we need the put also so let's see if it is suggesting it's not suggesting let me just find it out from where we get it everything is there in the Google you just have to ask for it you don't need to check YouTube videos or anything everything is there you just Google it you will find it correct now let's save and let's check it again now we should be able to open the drop down Slash new user it's not opening let's check if we have any more error provide browser module have been loaded if you need custom director providers browser moduel why it needs common module let's try common model adding [Music] [Music] sa still we have some error let's check what is the error now it's saying providers from browser module have already been loaded if you need a custom director this why it is saying like this so after adding animation it is it started that error so what is the way how we can override this browser animation module we have added let's search it properly what it was saying let's try to remove it then we will get to know what is there and we will try to search the same just same please make sure I browser let's try to Google this with angular 17 okay so previously we used to do like this but now what is the problem over here browser animation model only this animation model we are passing it over here again it is suggesting some error let me just search it rather than wasting so I got the problem what I search angular 17 prime NG and browser animation same thing what I have searched what was the issue so in the GitHub we have got it so he has said like in app config we need to add this so now in app config I have added this in provider section and in add user component we don't need this let's try to save all it should work properly now what it is saying user component line number three so now you can see drop down that animation is working and we are able to select the proper thing correct now let's see like what else we can do with the drop down so first like we need to filter it out so just like with any reusable component what we create what we do we pass the values correct so here so here you can see filter properties is there which you can pass to the component filter true so now we will get the filter where it is saying line number three let's see is this okay this was missing let's close it now you can see we are getting the filter let's try to filter it out we had okay yeah so here you can see we are able to filter it out correct so this filter will be will come handy when you have so many records that is going to be displayed in your drop down right so filter comes very handy let's see what else is there disabled is also there let's check what is the disabled to okay we can just disable it okay now here like let's say when we create a normal dropdown in when we use the for loop on the option in the value we pass the value and in inside between the uh option we show the text whatever the text we need to display so same thing when we bind the NG model so here you can see it's an array of object let's say selected City string initialize with mty and this see and this we have to bind to our drop down so let's import the forms model also now this I will bind it over here square braet round bracket NG model now this drop down hasn't I have pass an AR array of object but I need the code selected code while displaying so here here you can see we have provideed the option label as name so that's why you are able to see the names when in the browser you can see only names are visible the code is not visible so just like option label we have option value also and here you need to pass the key so key is nothing but code code I'm passing and this variable I will print it inside TD let's say save save this also now whatever the value is selected that code we will get it in into that NG model so London so here here you can see LDN we have got room see whatever the option we are selecting that value we are getting just like how we used to do with the normal option because here we don't have the control over the option now so from your array of object you need to specify what is the value and what is the text so just like this properties are there again now in each in each component you get to see like what number of inputs you have what number of outputs you have so here you can see what is this keyboard support at the top there will be they not provided over here yeah in the API so in the API you can see these are the properties they have whatever the propert is nothing but inputs then we will get some output also that is event emiter so on change on filter on drop down change we can implement the event just like that so many things are there which you can use so if you want to check like what properties or what events are there in a particular component you just have to go to this API and you need to search it so just like dropdown we have so many components which we can use so let's see what we can see editor Okay so editor is something like reex editor you might have used or not I'm not sure but this is something let's say there are so many application areas or scenarios where we need to provide the HTML so here you can say let's say this is B I can buold this like this if I need UL items let's say pun Mumbai H and you can select it like this and you can make it like this correct so there are so many things so but just um remember as I said like this is very well documented so first thing like you need to import this but to enable this editor you need another library that is quin so you need to install that also just for the specific then let's see what else we can try list box so here we can see we can select like this multiple do we have multiple or not let's see this is just like a drop down but not it will take us particular width and here you can see multiple options also you can select like this so this is the list box whatever the controls we know text box button everything they have also so let me just show you checkbox is also there so see but for checkbox also again you need to import so this is their checkbox multiple checkbox like this Dynamic checkbox also you can create just a for Loop and inside that you can post and we have masking is there so you know just like a placeholder we can provide like this this is called a masking providing enforcing user to provide the data in this particular format only just like that input text box is also there just a normal text box but some extra things are there we don't normally use text box but I'm just explaining like everything is there now let's come to our table this is the most important one so if we have to use the table this is the basic table what you need to do you need to import it so let's go to user list user component so first here we will put our selector sorry import statement import statement has been added now let's check their code so you can here you can see just like the table just like our normal table we have P table over here so let's just copy it let's paste it over here and let's see the TS code as well toggle full code and TS so here they are trying to read the data from the uh what we can say one API just normal service and in that service they have stored it so instead of that let's try to make the user service so we have to make the AP call so again to make the API call you need you need the HTTP cine model right so HTTP cine model I'm adding Constructor let's create object of HTTP clients so private HTTP colon HTTP client let's create a function G using we will use the Json placeholder API let's get that URL this is the API which gives us the list of some records let's put it over here so this do http.get method is there and you need to pass the URL whatever the response you get from it you need to subscribe to that and you will store that into a variable let's create a variable user list colon any R Mt whatever the response we get that we will store into this variable RS and this function we will call it on the page Lo just for now I'm just calling it in the Constructor but you should Implement NG on in it and there you should call the API so this we have done now this variable array variable we have to pass it over here to the value type now let's check what things are there name let's get the name username so from API we are getting so many field but we can limit that also like some normal field we can show email address then phone number we can show so just for bu now here also you just need to bind the same thing whatever you know object properties name email and homeone let's make it Capital One user name email and phone so now if we save it we should be able to see their table just the basic one we will again modify it user list let's Center so here you can see we have got the data this is just the basic table implementation now let's try to implement the pagination so page generator so to add the page generation what things we have to do so see first pator true how many rows default we have to do let's copy everything and put it over here on the table selector let's save it wait something is missing what else is remaining let's see yeah now it worked not sure why previously didn't work so see we from that apaa we just get the 10 records so it has by default we said five records so that's why only five is visible and we just got the two pagination see we are able to do this if we select 10 we will able to see all the records correct so let's say you need 5 10 20 50 100 like that also you can add so here you can see in the drop down you will get to see all the options whatever you add to there page ination we have done then let's say we need to add the Sorting so let's go to sort what is how we are adding sorting so this template you need sorry template not just this let me just copy whole thing let's copy let's paste it over here and now here you can see what changes you need to do this is like name let me just change it again user name so if we click on the name column with which field you need to sort so this field name you need to pass it over here now let's just save it and check it if we are able to sort with name and username so here you can see we are able to filter it out correct so this is how you use it everything is provided over there let's try the last one that is filter so what we need to do to enable the filter so here you can see first you need to add this hash value so let's add this hash value then we need to provide the global filter also so here you can see global filter is there means your array of object you know now but out out of that with which field you need to filter so we have name then username then email is also there what number of column you are displaying with that you can filter it out so just the field field name you need to pass it over here then you need the search box also let me just get the search box top that you need this NG template let's copy it let's paste it before this why it is saying value possibly null check it is asking Target sare backet single still it is giving error property value does not exist on event Target why question still it is giving error value does not exist on type event Target how it is working over here [Music] then let's see something else even. Target do value value does not exist on event but from where it is suggesting like this is event. Target let's pass the event. Target and this is a normal function we have to pass the ID even. Target Target value still it is giving error how do we pass let's save and check if we are able to run clear let's remove that object is possibly null what is the error don't have any error we missed something I think let's see whole thing again this data key Landing connection that's it why this is not visible do we have to pass it somewhere caption or P template we don't have to pass it over anywhere why it is not visible let's try to inspect [Music] so only Tad is there but this is not available what else we have to do let me just search it properly yeah so I have just Googled something so what I have got like it was showing the error right so the solution was providing the data type as any because in event. Target they have might have removed it so we have provided like this is any so now we can read it properly so now if we filter it out let's say di if we say so see it is filtering let's say cam so wherever cam V is there or let's say dot b so see all to all the object it is now filtering so this is how you use the table also so again like some normal things just I faced like in front of you what are what are the problem I face you Al you will also face you just need to Google it out someone might have faced that issue and you will get the solution so so many things are there you can use confirmation box let me show you the confirmation box confirm popup like this yes no confirmation dialogue box is also there like this when we click on delete we need to show the confirmation box so this is also you can use tool tap file upload so we normally use input type file upload instead of that you get this this is nothing but in behind it is input type file only you can choose multiple files breadcrumb context menu is also there like this see this is custom context menu chart.js so so many libraries uh libraries chart.js is already there it's a separate library but you can use it like this with prime you can use it line graph pie chart graph so many things are there Cal is also there drag and drop is also there see I'm able to drag and drop so you just have to decide which component you need to use you need to import that see what inputs and how HTML you need to write just write like that and you can use all the components from Prime engine so I hope this video was helpful to you with this you will be able to use Prime in your angular project so make sure you are implementing it if you are preparing for the interview these are some of the companies might ask to install the prime NG or AG grade or even sing Pion also or material any of the library they want you to check like do you know like how to use the external libraries or not so for that only they will give the machine test like this so that's it with the current video we'll connect again