PrimeNG Dynamic Theme Change (using Dropdown contains multiple themes)

hi all welcome back in this video I am going to explain about the dynamic theme in the previous video I have showed you how to manually change the theme of a prime NG application so here you can see I have created a drop down which contains three themes when user clicks on different theme it will be updated the whole page accordingly so if I select the bootstrap for dark blue it will be updated the new theme into the application so let's get started so we are going to create team files first for that you can go to the SRC folder and create a new folder called themes inside that whichever the files which are the themes you needed you have to create a file for each theme you are going to use in a program so I am going to create three files here so one is mood stop dark blue Lara light theme and the Nuna green theme so I am giving bootstrap four dot Blue Dot CSS file so if you don't understand from where I got the name you can go to the prime and G theming section and you you can see all the available teams option okay so here from here I'm going to use first I am going to use the bootstrap for dark blue that's what I have given and copy this particular URL and in that CSS file you can import in double quotes you can add the path so this is bootstrap for dark blue CSS the similarly the next one I am going to use is Lara light blue okay so you can go and check the path Lara light blue so this is the CSS so go and create another files in the theme section which is Lara light look dot CSS file then inside that you can give a tempore then the path which we have copied from the prime NG theming place another file I am going to create is Luna green Luna green dot CSS file and go to your theming section time NG theming section and copy the path of Luna green so this is the lunar green CSS and please import that CSS file Import in double quotes okay so these are the three themes I am going to use it so whenever if you are using multiple themes more than these three themes just create all these files here and import the path inside the theme section or directly inside the SRC folder okay so this is the first step second step is go to the angular.json and before what we have done we have directly implemented the Lara light blue theme here right instead of this what you can do you have to create object here so these three objects you have to create for each theme each theme inside the themes folder Okay so I am just added so this is the folder so SRC themes I have added the path here and I am telling this is the bundle name I am referring okay and the path and the bundle name I am referring again the path the bundle name okay so once this has been done go to the index.html file inside the SRC folder so it's RC folder we have an index.html and you have to add a link of the default theme okay link of the default theme so I am just considering Lara light blue team as the default theme so here I'm coming and I am adding an ID here and in the href I am just adding Lara light blue which is the Bunty Leaf so here I have mentioned the bundle name as Lara light blue so you have to mention Lara blight blow dot CSS file okay so this is done let's check whether by default you are able to see Lara light blue theme or not okay once that is done once that is checked you you can add a drop down and we can change dynamically so if your if it is if your application is running already make sure you are exiting the application and again re-run it okay so here in G cell okay compile successfully so now you can see the Lara blue theme is there by default so our next theme whenever we selecting a theme Lara light blue theme should be replaced with the selected theme that is our next you know Target so that you have to add a drop down first and from the selection of the drop down you have to change this value okay so that's what we are going to do right now so in order to add a drop down you have to import um forms module and the drop down module from the primary so in the Aptoide module.ts file I am adding forms module because I am going to use the NG model so here you can add the drop down module and forms module then browser animation module also needs to be imported otherwise dropped on home work properly okay that is done go to HTML file and add the drop down okay so the drop down primary drop down is like this is a primingi drop down and the drop down options I will add it in the TS file and then whenever we select a team it will assign to the selected theme name and whenever we change the theme name whenever we select the theme we have to call a function okay so this we are going to add it in the TS file so go to the TS file and we have to create a variable called themes because these are the options these are the themes option and ID is the same name which we have given in the bundle name okay so I am just giving the same name Luna green and bootstrap for dark blue okay so and I am telling the selected theme the selected theme have a interface which is ID equal to string and label also string and I'm telling that the by default which is the default thing is Lara light blue so themes of 0 is the default one so I'm just assigning it okay then next one we have to write a function called change theme whenever we select a value from the drop down okay so change theme and the theme IDM selecting and it will be always stream and we have to write the implementation so implementation I am going to write in a service file so for that I have to create a service file so for creating a service file using angular CLA you can give NG generate service and inside the app you have to create app service file right so just NG generate Service app so let's see app service file is created here so go here and you can use the HTTP so I am not using any HTTP client related theme so you can directly write the function okay so what I am going to do here is I am going to inject document so document is needs to be imported from the angular common function I am overriding these so document is imported here because I want to access this particular link okay so first I will add that in the Constructor section then I am going to create a function which is called switch teams and what I am doing here is when any theme is passing theme ID is passing here it will take the get element by ID app that is which is in the index.html I am giving an ID here right so it will access that element and if that element is there what it will do the hrf will be replaced with the ID we are selected right that's why I am telling the three places so here the hre of this value is a bundle name that should be the bundle name and here ID should be the bundle name and here it will be replaced with a bundle name so in the angular.json whatever the bundle name you are using it should be added in the index.html and it should be added in the ID of the array of the themes okay so it will be replaced with that theme dot CSS file this is what we are doing here so you can go here and simply calling that one so for that we have to call a Constructor here and inject the app service so Constructor adding private app service then I'm calling the app service here you can call this dot app service dot switch theme and you can pass the theme ID let's see how it looks so once everything is done we will run the application in G cell okay refresh the screen you can see first by default it will be applied Lara light two three uh live blue theme and next if I select the Luna green the theme is getting changed to Luna green and if I select the for dark blue it is getting changed to that that thing as well so you can see how it looks

Channel: Learn from Scratch

Views: 2,906

Keywords: angular primeng tutorial, dynamic theme change in primeNG, switch theme of primeng in ui, switch theme in angular, angular primeng theme switch, change the theme in ui primeng, learn from scratch, @haseena.khader, primeng components, primeng theme, angular primeng theme, multiple theme implemetation in primeng, how to use primeng theme, primeng theme switcher, primeng component tutorial, primeng theme tutorial, theme changer primeng

Id: JZYHo86eov8

Length: 11min 34sec (694 seconds)

Published: Tue Sep 12 2023