Angular 8 Admin Dashboard Panel from scratch using Angular Material, highcharts and flex-layout 🎉🎉

I am welcome in angular series my name is soufiane fidel and today will help you create an admin dashboard panel from scratch using angular 8 high shots and flex layout so let's get started open the terminal' and create a new project add the routing and choose your desired styling I will pick s CSS [Music] all right enter your project build it and open it in the browser [Music] all right we can now see the default homepage of an era open the project in your desired text editor and let's change that out I am using visual code you can use your own text editor I'll open app folder and app component to the and remove that out let's way back the to the browser nice all right so let's install angular material simply type ng-app angular slash material I will pick the first the first team how much this is important so I'll add it browser animations yes nice I will add now hi shots angular and let's save it and let's install hi sharks now and let's say let's install effects layouts it's angular slash text layouts and angular CDK and don't forget to save it alright to do a tests I will go to update module and the import a buttons on max button module it's not known so I will add this manually on line seven hangar material slash back yeah good I will add the button in the HTML cetera icon something it's Matt's waste but primary good so let's remove it now it's all good yeah after tomorrow and remove that touch module let's remove it from it you let's define our first layouts or created under a folder card layout so I will call it simply default and let's create its module let's create now the very first page under modules and we call it - bot how open up that module and clean it up the default touch module and imported the default components also I will add the declaration for the dashpot component I came back to the update module and imports the default module nice I will go now to the update routing and add my very first Russia so the component balance will be the default components and this will have child's the very first child is the the dashboard page the path will be empty and the component is the dashboard component [Music] great let's check that out let's get back to the code we we should see the dashboard here instead of default we'll go to the default components HTML and replace it by our router outlets and to use the router outlet we need to compose the router module so let's import it so now we should should see dashboard works nice to work as expected I'll go to the the HTML and add a header footer and sidebar a temporary ones and I will replace them later by shared components let's check that out yes header and footer get back to the code let's create at Heather Angie generates components and shared another section called components let's create the header yes let's creates footer and the sidewalk and I will create a module that whoops shared without ya I will create a module that gather all these shared components I will remove that just a mistake and I will keep the module I'll clean up first the update module this unnecessarily on declaration let's get back to the browser everything is working spirit a component [Music] actually a new page called posts let's clean up past opponents let's move it and let's add in the declaration the new page that we have added in up the Trojan are who had another child which is pasts and in the parts voltage posts without stash and the component will be the posts component other words how this chapter in the UL pasts so pasts works I'll get back to the previous page nice - okay okay so now I will replace the header by the original Heather all by the its components the same for the footer oops open and closed this side [Music] and let's import the shared module and in the shared module I will have declarations mainly the components that I've created a header portal and sidewalk and I will add them to in the exports section in the last round sighs that's good so let's check the other page yeah posts works good good okay so now I'll add a some it's material design components okay so the sidebar holder it's the match straw and it's the last one match to our index add the content inside the drower content first and the sidebar inside the match to our good good let's check that out Oh in the module all its imports that it's the site now you can find it out adage manually and you are / oh it's V and see the fog yep my bad yep so now it's working good so there's a sidebar and here is the the Canton's let's change the page and yeah so this is all good good so let's fix the CSS the matter our I will give it a width of 315 pixels I guess it's it's yeah that's good that's good for the match to our content container I will give it a height of 100 percent of course this won't work LSD holder or like the container is 100 percent - so I'll give it effects display and the direction column and hates adds another percent strip that I hope nice I'll go to the photo and fix it first and I'll be quick I will add the total back side that is copyright sign all rights reserved mm I will add a math dividing you can add a border to not to forget I will import the mod divider module nice I'll step back to the CSS for the photo type I will add it I give it a padding of 20 X oh that's right in the header I will copy pasta code I will get back to it a few seconds let's abort the mods my toolbar drive faster than me each channel also an icon make sure not to forget anything good so I will delete that and replace it by a sandwich a sandwich button simply it's how much icon called menu that's in the left and the up logo if there was any no need for image I would call it's in the top logo and in the right of the toolbar add a div and the lists alignment its Flex endo should be aligned and the at the end nice and that should be a row and they give it to a gap of 20 pixel the first list will be a button you can use a a URL or will you simply apartment an icon which will be sitting let's not forget to add it in the modules so button and flex layout module our imported manually so flex layout angular / black / the module respects now nice okay yep novice correct process as I will remove the our list style yes that's defecate that block and it's odd a help button and the last one will be menu let's cut the eel assists all right I mean you know just mean you okay so all was good except the menu I will add it okay let's pick that code okay I want that one good copy that and paste it in in my code this will place that text here I want an icon so place it by an icon let's remove that last button and for this button I will add an icon called exit to app and the texts sign out nice match me new module and good let's check that out nice really good really good okay so the sidebar okay out XD you rights or like the content first let's get back to the recesses maybe yeah see though the content should tell our content he'll give it a padding of 20 pixels and that's it's nice okay sidebar maybe regulator okay okay so I'll go directly to the contents and they will place that text and I've had some placeholders I will need a line shot a big line chart and for maybe four other line shots smaller one over the divider first yes that's a line shot and for lunch arts and math divider divider yes and joe contends maybe table yeah and the other one will be a pie shots shots good not divider module let's import that and [Music] let's check that I'm in posts yep let's get back to the dashboard now in the dashboard yeah I can see my placeholders I will place them by her real components in the sidewall will add some placeholders profile and then menu mat divider and another another meaning get some very hot okay so I've had a mad nap lists I will show you that in the material under material websites the very first section will be the profile will add a class column header and an image on the image I would pick it from I know what to put okay let's look for cuts yes gods and this one let's pick that one so here it is for the textile had an H to put my name and then H for I will put my email harmless just an example example add our email at all right alright let's add some CSS for the profile card all the text should be online into the center right and the path in twelve eight twenty minute XO and for the image I want it ho give it maybe 200 all right and the height also is 200 there was a good poverty called object fits yes to cover and the border radius to 50 percents yes okay let's add the dependencies so it's a Matt lists module right let's check that out niceness Powerflex some space in first get back to the CSS file for the top I will remove the value on the top and they will keep that in the right bottom and let's do now is get for the image may be hundred percent is enough that's enough four outs there let's move that inside the mat nap yeah I'm a divider and then H 2 are called pages or what's pages without spaces and it's how this property mat arms up Heather rights all rights let's remove that and let's add a some links without a giraffe's are allowed Matt lists item and water link should yes to go back to the dashboard we'll add another property router link active and I will give it a class name called lists item active right topic 8 that add four posts and maybe articles articles you see for the URL good the imports throughout much weight good so here's my h2 and the links let's get back to the code h2 matza hub Heather they will name it tools I will put other links I will copy that pass it in here right change the label I will put an icon okay so icon so that icon should be import contacts and and the router link and the to do directs to contacts let's copy-paste and we'll need it later I will name dad's contacts and the other one needs yep I will change this icon to contact icon conduct phone cycle all right so tools okay hope it's the CSS something fishy here yeah should a little hem yeah this should do the work yeah nice let's fix this ss all the mats icons in the sidebar should have a vertical align to middle and the margin left to maybe 10 training etc [Music] good now everything is alright let's make this button work how close everything including this tab and open the default component HTML not really okay I will create a variable we call it sidebar open and give it to false they give it a value holes that's it and they will use that in the HTML file and that's it so now the sidebar should be closed right yep if I change it to true it will be opened yes okay so what I will do I will create a a function or create a click Add button and Heather does HTML I would call it total sidebar and this toggle sidebar should emit and events it's gonna be in ouch boats I would call it total sidebar for me and it's gonna be an event in mr. White's infant immature from angular core right I'll type any my I don't care much no yeah and it should be a new equal to new event integer that's right so when we click that button we should emit an event so toggle sidebar but emits and that's it so now i'm emitting an event and this event should be received in the default component to change or like to close and open the the this sidebar so i am passing an arguments so total sidebar it will take our parameter so the i output is toggle sidebar for me it will take the sidebar total events i will create a function now in the default components that's right so now if this is click 'add so this taught sidebar open should be the opposite of its value let's check that out good good I will create a widget called sidebar for the big one I will go to the website and pick shots this is line shots maybe maybe aerial shots maybe hear shots I will pick that yep secret area seems good our coverage area simply area and inside that that widget let me close those components let's yeah let's export that in share module let's go to the area and coloureds up widget area and silver area and let's reflect that placeholder by the name of my new components yeah every works so it's good let's get back to the code let's go to the shared module and imports hi shots so it's how in shots let's import that when you leave right yep nice let's copy past that and use it in the e ports there is one piece missing it's that one and we will use it in the component all right and I will pick the HTML box I will copy past it I will remove all the stuff that I don't need I don't in all of this all I need is high shots and options right let's get back to the component high shots option equal to I don't give it's just de madera and let's fill it in here let's get view and pick all this code alright let's get past it in here good it's complaining now it's fixed good hi shots didn't create it yet so hi sharks I can choose my shots nice there we go there you go so it's working because that and this check ok I will move that credits that's working it's working it's working fine [Music] let's get back to the component and that's update adds I will move the texts College London data source you know place that might denote let's see move all of this I don't need it that one too I don't need it it sport in its neighborhood and credits it's disabled so enabled equal to false enable it faults that's right let's start that let's go sidebar yeah okay so the export is not showing I will have there try it right now okay so here's a trick the the shots are not responsive so I will trigger a new event called resize just for the shots to readapt itself that's right treat the coma that's right let's check that out yes it's good it's good the exports ok the exports I will now add the exports function let's get back to the website ok exports here it is I will import the the odds-on for the exports I would put it in here and this function should go right here let's check that out good so now I can export my shots as PNG or jpg PDF good so oh just set up space in nice perfect now V for the four line shots it's gonna be flexile TRO and flex layout in line to space between Center and the gap is too inflexible good so I will add a card and replace all this one replace it by cards maybe with FX Plex equal to 25 and let's up let's copy fast that's 4 times good I will add the mascots into the default module textile trusts module and that's called module that's good let's check that out good so I have 4 cards I will paste them by their by shots good so a br [Music] so let's create the cards your colored card you can choose another name if you want so in the card it should be similar to the area I need to start with a widget okay so my workplace is that this placeholder by by its component another caption rights in the shared module I need to export that card module that's it nice I will pick the the the imports the same one will be used in college component [Music] all right it's complaining okay if it's a hater let's copy past the HTML replace first in here short absolute mess in our auditing here let's define it first and then we'll place its contents in all rights I would have you pass all of this come fake and replace it all of it grates that's good let's rename it I don't need the title I don't need the subtitle for the credits I need I don't need exporting so I will leave the export button and what's left okay so for the day that should be our two big big difference so there are equal to 70 178 1339 and 66 good let's check that out yeah okay good good it's a bit ugly I will remove the this line the same for the the I will move everything I don't need this I don't need a legend so enable to false okay nice okay I will go other stuff and remove the background so the background color is now the border with zero [Music] the height is 16 okay fine it's better there is a border I will remove it [Music] you [Music] then I will duplicate that 4zy access to let's check them out yeah much leader yeah now it's much cleaner I'll go to the card each channel and add a class so the first step will be we hold on the text and the second Dave will hold the shot itself okay so I need a H for for a label rights a span for the total another span with an icon so joined in up or down depends on the case another span that will hold the description arm let's get the description and aside I want this percentage of the trend and also a novice man which will be a text good [Music] let's close that and let's create this inputs so the first input is the label should be string the second is the total and the third is the percentage that's right let's get back to the dashboard and send this bombs so the label is users and the total is 18 K and the percentage is 15 all right good so what we need is some CSS that's right so the h4 should have a margin top or without your motion top the total our font size will be 3 a.m. and the icon and the description should be green good and font size to Julia and the Matt icon should have a position relative and the padding of 0 let's check that okay I will hover over add the padding and the top of 5% for the h4 I will remove the top it seems much better good let's replicate that okay maybe twelve let's change the values of users or new users change that so 10k you can change the data if you like users retention and user engagement and the hello just check that out seems amazing okay so this is still not responding when it closed the side bar out like that I'll pick the exact same code that I've used inside by ng on in its it's this one and I will use it in the header because the Heather yes good good and now it's responsive let's get back to the code and let's replace that how okay so a fixed layout to row and align to our space between Center and that gap of 20 20 percent so the first will take the 60 percent of the page and the pie chart will take only 40 percent that's right let's replace the pie chart by app widgets I didn't create yet let's create it let's pie us right here it is let's export it and let's back the imports in boats let's pick all the other valuables [Music] and this one's you okay let's go to the high shots website and pick up pie charts and expect the options and I will copy past all of this content let's replace it in our content on our components good so is a widget right and let's pick the HTML parts and it's replace that and that each channel I will move this title let's run them there so what's missing okay late sports so it's enabled exporting enable to true and ecwid it's it's all right good let's get back to the gold and let's create a service I will put it inside module and we call it - one so dashboard service that's right okay I'll create a first outlets imported first it's providers and let's imports the dashboard service nice I will reuse that dashboard service inside our dashboard component so provides dashboard servers sequel to dashboard servers a chance go to this dashboard service was a big shot I will create that function in a second it's open this fine yeah this great that function so big shots let's return a dummy data and now I will pass it's okay that's why it's that's good I will create another one for the 44 other line shots or cut them cards and cards so let's update the cards and add a data so let's remove this and we'll base it by and inputs hold call that state let's define that so input data equal to an inch in a way that's right God doesn't exist yet someone created in the dashboard service and it should be so return Sunday it's good let's okay let's add it way in the end so they are at should should I come to cards writes let's check that yep that's working like Sean let's apply this to all the other cards so second one and the others right okay so what is missing it's the pie charts let's copy the data section and it will pass as my own inputs [Music] that's right and let's create that variable for college by notions in pie chart should receive data from the service nice let's create that method so five shots and which we should return this data that's good let's update our HTML and send the input back to its components let's check that so it's working that's good you so the table it could be an exercise for you or create its components and add it to the dashboard component and see if you can make it or not okay I will go to the table and let's see okay this one is good sounds good I would pick its code and add it to the dashboard directly copy past this HTML and get back to the code I would close all the others and leave only the dashboard components and that's passed at let's clean down a bit okay let's get back to the module and it bought all the necessary modules so match pagination module what else my table my table module where else Awesome's okay seems okay okay so nothing left I will declare the out creators valuable resource will give it a name Jim ray [Music] we'll copy all the necessary stuff so display columns and did their source the same from this view side let's copy past that I will move the first one okay it's a port at my table source and match pagination and view site [Music] good let's copy the period elements at your face I will put it right in the top elements data that's all we need are working machine it's the pterosaurs passionate oh and with this let's get back to the code let's bust it here it's SS final stuff because this SS let's bust it here let's see and there we go incredible so here is his folks I hope you like it please don't forget to Like and subscribe if you like my videos and see you on the next tutorial thank you you

Channel: Code Academia

Views: 333,890

Rating: 4.9455214 out of 5

Keywords: Javascript, Angular Admin Dashboard, Angular Admin Theme, Angular, Angular 8, Angular Dashboard, Angular tutorials, angular tutorial for beginners, Admin Panel, Angular Admin Panel, highcharts, angular highcharts, angular flex-layout, angular material, angular charts, angular material dashboard, material angular

Id: FP7Hs8lTy1k

Length: 61min 20sec (3680 seconds)

Published: Mon Nov 11 2019

Reddit Comments

[u/TLK007]

Damn I was looking for exactly this. Thanks!

[u/Isvara]

from scratch using [things]

Hmm.

[u/samistark86]

Nice