Angular Material Customizable Dashboard #1: Create reusable widget components

#angular #dashboard #animation
✨✨ Get the complete code for the Angular Customizable Dashboard here: zoaibkhan.lemo...
💡 Live Dashboard Link: angular-dashbo...
Playlist for the Angular sidebar tutorial
• KZbin style Sidebar ...
📽️ My courses:
zoaibkhan.com/...
✍️My blog for more free Angular posts:
zoaibkhan.com/...
In this first episode of our series, we embark on building a fully customizable Angular dashboard using Angular Material 3 with the latest Angular 18.1. We'll create reusable and dynamically rendered widget components, use CSS Grid for responsive layouts, and set up a simple store for managing widget states.
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections:
00:00 Introduction to Customizable Angular Dashboard
00:01 Overview of Dashboard Features
02:51 Setting Up the Angular Material Application
04:00 Creating Reusable Widget Components
15:49 Dynamic Component Rendering
17:03 Responsive Grid Layout
19:51 Conclusion and Next Steps

[@ZoaibKhan]

Watch Part 2 of the series here: kzbin.info/www/bejne/mpuziq2jjq6Va68

[@EusebioJoveth]

Thanks you for always providing us with great concepts master.❤

[@ZoaibKhan]

It's my pleasure

[@Neotrixstdr]

Great!. Amazing video

[@ZoaibKhan]

Glad you liked it :)

[@ubaizxd8223]

Thank you sir, ig you are the only gem mentor of Angular in Pakistan.

[@ZoaibKhan]

Thanks Ubaid for the kind words :) I'm sure there are others better than me in terms of technical skill

[@niloybarmon7975]

Great video for angular developer. Highly dynamic.

[@ZoaibKhan]

Glad you liked it!

[@xuanthanhtran4699]

amazing, this is the best chanel design angular, thank you

[@ZoaibKhan]

Glad you liked it

[@ytamb01]

Thank you very much. I've been working on a side-project to create a configurable dashboard for our app. But it's difficult to know the best practices are, now that standalone components and lazy loading them is an option. Really pleased you are sharing your expertise.

[@ZoaibKhan]

You're welcome and thanks for your comment! What kind of a dashboard were you working on? Is it similar to this or involves more configuration?

[@ytamb01]

@@ZoaibKhan The dashboard itself is quite similar (though not as beautiful). The dashboard widget grid-column and grid-row spans are configurable via css classes and ngClass (again not done as elegantly). No drag and drop yet but I have use the cdk before for similar tasks. The inner components can vary a lot from lists to notifications and have their own specific configurable UI launched via a modal. So all similar enough to this series that I feel I can learn a great deal! Thanks again.

[@ZoaibKhan]

@@ytamb01 Aah, sounds good! I like the idea of more configuration options for the widget content - categorized by widget types - would be a good thing to build into this dashboard as well :) Thanks for your input and good luck with your dashboard!

[@vivekgupta309]

very nicely explained !!!

[@ZoaibKhan]

Glad it was helpful!

[@AidosOmurzakov]

good job really like your tutorials

[@PLanBBeaTZ]

I really liked how you explained the concept behind it. It was very easy to follow. good job!

[@ZoaibKhan]

I'm glad you liked it :)

[@davebudah]

Thank you for such valuable information.

[@ZoaibKhan]

You're welcome 🤗

[@TheZukkino]

Terrific video. This is really interesting and well explained. Thank you so much 😁

[@ZoaibKhan]

Glad you enjoyed it!

[@Gyver4000]

thank, very good tutorial, wait next

[@ZoaibKhan]

Coming soon, tomorrow or day after :)

[@dcoding]

Excelente

[@MizterFrek]

Amazing!!!

[@GeorgeYip-ni9km]

Great Tutorial. May I ask, @5.40 I noticed that the content is typed as "unknown", but that type is from Angular and not TS. First time seeing this, what is the difference and can you use unknow from TS instead?

[@ZoaibKhan]

Honestly, I'm not sure myself. Will check and let you know. I used the Type unknown because it's the same type angular routes use for lazy loaded routes...

[@GeorgeYip-ni9km]

@@ZoaibKhan Thanks Zoaib

[@PuneshwarLondhe]

next part plese

[@ZoaibKhan]

In next day or two :)