Angular Material Customizable Dashboard #1: Create reusable widget components

[@ZoaibKhan]

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

[@niloybarmon7975]

Great video for angular developer. Highly dynamic.

[@ZoaibKhan]

Glad you liked it!

[@EusebioJoveth]

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

[@ZoaibKhan]

It's my pleasure

[@TheZukkino]

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

[@ZoaibKhan]

Glad you enjoyed it!

[@ubaidullahxoxo]

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

[@davebudah]

Thank you for such valuable information.

[@ZoaibKhan]

You're welcome 🤗

[@xuanthanhtran4699]

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

[@ZoaibKhan]

Glad you liked it

[@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 :)

[@vivekgupta309]

very nicely explained !!!

[@ZoaibKhan]

Glad it was helpful!

[@Neotrixstdr]

Great!. Amazing video

[@ZoaibKhan]

Glad you liked it :)

[@AidosOmurzakov]

good job really like your tutorials

[@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!

[@Gyver4000]

thank, very good tutorial, wait next

[@ZoaibKhan]

Coming soon, tomorrow or day after :)

[@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

[@ksknysn]

what about using mat-card beside widget?

[@ZoaibKhan]

Well, you can use mat card if you'd like. But since I wanted a more custom design, I went for my own styling. Mat card is basically just styling for the most part, so I only use if I want a material looking card quickly

[@ksknysn]

@@ZoaibKhan i tried using theme but the themes can't be applied your custom widget. it confused me and my code so i decided to implement mat-card. i will see the result soon :)

[@ZoaibKhan]

@ksknysn that sounds good! For theming, I've another video on dynamic color variables where I use them to theme the widget component. Check that out in the theming playlist on the channel

[@ksknysn]

@@ZoaibKhan thanks. i just now started to implementing it

[@ksknysn]

@@ZoaibKhan if you add different theme options i think we can buy your dashboard :)

[@codeaz5673]

done ✅

[@dcoding]

Excelente

[@PuneshwarLondhe]

next part plese

[@ZoaibKhan]

In next day or two :)