Angular 8 Admin Dashboard Panel from scratch using Angular Material, highcharts and flex-layout ??
The goal of this tutorial is to show how to create an Angular Dashboard from Scratch using Angular 8, Angular Material, Highchart and Flex-layout.
By the end of this tutorial, you will get an understanding of Shared Modules, Reusable Components, Routing, templating and how to use Charts in your projects.
Github repository:
– 00:18 Requirements
– 01:40 Install Dependencies (Angular Material, Highcharts and Flex-layout)
– 04:09 Layout definition
– 31:50 First Area Chart
– 37:50 The 4 Area Charts
– 49:47 Pie Chart
– 57:28 Exercise? (Table)
# Please support us on Patreon If you like the video:
#Angular #angularDashboard #angularMaterial #angularFlexLayout
Thank you so much for the tutorial. Observing this I was able to create a dashboard for my needs and it came out amazing. Thanks again for sharing such a wonderful tutorial, learnt a lot from this, being totally new to Angular.
@Code Academia i will work on it and see.
I had similar issues, when there no errors logs that mean HighCharts are not receiving the right params and/or data.
Trying a us map chart now to display # of server hits from different states. Going with the example from highcharts site, code compiles fine, no errors but chart is not rendering, stuck. Only the x,y axis is displayed, map is missing 🙂
Glad to hear. Thanks for the feedback.
Best of luck ?
Fantastic tutorial, really well explained. an update when using Angular 12 – at 31 min 20, in the default.component.html New angular does not seem to require the $event to be pass, remove the $event and works. Thanks again!
thanks for your feedback, i repaird and it work in angular 12
Thanks
Thanks for feedback <3
Fantastic tutorial. Really well thought out and allows people work away at their own speed. Many Thanks !!
Thank you for such a detailed, step by step tutorial, which included a beginner friendly walkthrough for Angular Material as well. Learned loads!
Many thanks, i appreciate it ?
Great tutorial. Though new to Angular, enjoyed following and tweaking for Angular 12. Lot’s of pain but got there in the end, after 3 evenings. I learnt a lot.
For the exercise on adding the table: I went about creating a widget: “app-widget-table” rather than directly on the dashboard component; I felt like you cut corner there :).
Great and the more valuable tutorial. The code works perfectly with Angular 9. If it is possible to have a graphical roadmap for the beginners. It seems you are coding on the spot but sometimes beginners want to know why are you from a macro and micro perspective. Great Tutorial.
I got you point. It’s really valuable.
I’ll try to do that.
Many thanks
Thank you for this tutorial. I echo the other’s sentiments and say it is the best tutorial I have come across. Once again, thank you for taking the time to put this together!
That’s a really good feedback. That means a lot to me 🙂
Thank you for this beautiful comment, have a good day 🙂
Thank you very much, nice explanation while coding, need much more of your quality contents, you are a life saviour ?
Thank you for this tutorial. Very easy to grasp. I have one problem though, how do i get elements/contents within the mat-drawer-container to cover the height of the view port. Currently mine only covers 20%, and the sidebar is scroll-able which is not the desired outcome.
thank you for this tutorial, it’s perfect for someone like me who knows bits and pieces of Angular 2+ but just needed to stitch a few of the concepts together with a project like this.
Glad to hear that.
Best of luck
Hello, thanks for the video ! learned a lot 🙂
Do you recommend using highcharts when fetching data from back end (spring boot)?
I’m kind of struggling (a lot) to display data and to the point of asking myself if it’s easier with another charts library.
Any recommendations? 🙂
Hi DD , were you able to find a solution for your problem ? i’m kind of stuck at the same situation , working with spring boot / angular and i’m trying to fetch my data into the highcharts
Use services to call your API 🙂
It was just awesome tutorial for me. I appreciate your efforts taken for this tutorial. One Question : How to do multilevel Sidebar menu. You will definitely help me in that. Thanks in advance.
Thanks a lot for this precious & useful tutorial : I’m approaching to a real application that has to implement a dashboard very similar . Great work !
Thanks for the feedback ?
Muy buen vÃdeo, y muy claro todo lo que haces, me funciono muy bien para mi. Saludos
This covers most of the real practical scenarios one can face in actual projects ???
Thanks. Great tutorial. As a beginner in Angular one thing which is difficult to digest is the way the layouts, modules and different components are structured. On the same context if you create a http service to get the data for the charts where would you create it ?
Sure i can help with that 🙂
Great video! I was looking for this kind of tutorial on Angular Material, Highcharts and Flex-Layout. Helped me a great deal. Thanks!
Thanks for you comment 🙂
Awesome tutorial buddy… Pretty crisp, clear and no nonsense… Thanks a ton for the tutorial…??
I appreciated it 🙂
Thank you very much, awesome tutorial!! Hope you can continue this content on how to integrate this dashboard into backend using MySQL and other framework. Thank You!!
Very helpful! Thank you. As a Designer, this helps me see and understand the process the Developer will go through. Helps with synchronicity between the two.