Angular Material Customizable Dashboard #2: Adding Customization features!

Опубликовано: 10 Ноябрь 2024
на канале: Zoaib Khan

2,580

#angular #dashboard #animation

✨✨ Get the complete code for the Angular Customizable Dashboard here: https://zoaibkhan.lemonsqueezy.com/bu...

💡 Live Dashboard Link: https://angular-dashboard-lime.vercel...

Playlist for the Angular sidebar tutorial
   • Youtube style Sidebar with Angular Ma...

📽️ My courses:
https://zoaibkhan.com/courses

✍️My blog for more free Angular posts:
https://zoaibkhan.com/blog

In this second episode, we cover adding customization features to the dashboard - allowing user to resize and reposition widgets in the CSS grid!

Socials:
Twitter -   / zoaibdev
Facebook -   / thisiszoaib
LinkedIn -   / zoaib-khan-b6456815

Sections:
00:00 Introduction to Angular Customizable Dashboard
00:37 Adding the Add Widget Button
02:02 Creating the Widget Menu
05:18 Handling Widget Addition
08:30 Implementing the Options Panel
15:15 Customizing Widget Resizing
18:13 Importing Angular Material Button Toggle
18:32 Setting Up Button Toggle Group
19:34 Customizing Button Toggle Appearance
20:29 Binding Rows and Columns to Widgets
21:07 Implementing Host Binding for Grid Area
22:24 Testing and Updating Widget Properties
25:28 Injecting Dashboard Service
26:58 Adding Resizable Widgets Feature
27:20 Implementing Widget Positioning
29:14 Adding Move Widget Functions
32:51 Testing Widget Positioning
33:21 Upcoming Features and Conclusion