**🔥 200+ people bought this!**

A Drag and Drop Dashboard Builder with Angular Material where your users can build your dashboard live by dynamically adding and removing widgets from a widgets panel. Widgets can also be resized to fit your layout as you see fit.

Try it out LIVE: [https://angular-dashboard-lime.vercel.app](https://angular-dashboard-lime.vercel.app)

**Feedback from YouTube:**

> *"Thanks Zoaib! I work with Dashboards and **this approach is amazing**"*  
> *"Terrific video. This is **really interesting** and well explained."*  
> *"I really liked how you explained the concept behind it. It was very easy to follow. Good job!"*

---

### Features of the dashboard:

- **Login added** using Firebase Auth, Firestore and Storage
- **TailwindCSS integrated** for utility-first styling
- **Drag and drop** widgets to and from the widgets panel to "build your dashboard live"
- **Dark Mode** using Material System Color Variables
- **Resize the widget height and width** using the options panel
- Changes in layout are **animated nicely** using `animate-css-grid` package
- Dashboard layouts once setup are automatically **synced with local storage**
- Includes **sample widgets** for showing statistics, graphs using `chart.js` and other relevant widgets such as a comments list.
- Has a beautiful **collapsible nested sidebar** included!

---

This product includes **lifetime updates** to the dashboard — so buy once and get all of them for **FREE**! 🙂

Angular Material Drag & Drop Dashboard (Premium Template)

**🔥 10 people bought this.**

Google Style Search Bar with Angular CDK Overlay Package and Material Components!

It contains a search bar with nice dropdown with the following features:

- **Recent searches** stored in local storage
- **Quick Search implemented** using Google Books API
- **Books Detail page** to show a detail view
- **Search Results page** to show list of books matching the term

All of the pages derive their state from the route parameters, so you can get the exact same state of the app when you refresh the URL!

This is a good example of a complete app you can build using your own APIs!

It has been built in **Angular v20 - using signals and all of the latest features of the new releases.**

Gmail-style Angular Search Bar with Quick Search and Recent Searches!

Ever wondered how to do 3D in Angular?

3D product configurator built with Angular 18 and Angular Three v2 (wrapper on top of THREE js) shows you just that!

It renders a 3D model of a coffee cup from a GLTF file, adds suitable lighting and camera angles and allows the user to change its color dynamically by a color selection list. The model also auto rotates using Orbit Controls and can be rotated with the mouse as well.

Full tutorial here:

[https://youtu.be/9j-k5BdH22g](https://youtu.be/9j-k5BdH22g)

Angular 3D Product Configurator (Angular Three v2 + Angular 18)

**🔥 136 people bought this.**

*"I bought the ... full project and it works great."*

*"Amazing, thanks!"*

*"Thank you so much for this. Exactly what i need."*

A youtube-style sidebar built up in Angular 18 which also allows infinite nested sub menus using recursion and auto generated angular routes!

Demo: https://angular-youtube-sidebar.vercel.app/

Some features:

- **(NEW)** The sidebar allows infinite levels of nesting and auto generation of nested routes from the menu items array (01-08-2024)

- Now the sidebar allows **nested sub items** as well! (15-06-2024)

- Youtube style including nice **CSS transitions**

- Allows to minimize the sidebar in a collapsed state

- Uses **Material design**

Angular Youtube Sidebar with Nested Sub Menus

🔥 **35 people have bought this!**

Create beautiful, responsive forms with Angular Material and Tailwind CSS

Try it out with free export: [https://forms-designer.vercel.app/](https://forms-designer.vercel.app/)

It has the following features:

- **Drag and drop** fields to a canvas

- Modify settings for each field as you wish

- **Preview fields** in the preview mode

- Add **multiple fields** in same row and arrange responsively

- Move rows to reposition fields

- **Export** the final code for use in your own app!

Angular Material Forms Designer With Code Export

Introducing the Angular Upgrade Bundle – your ultimate solution for seamless Angular application upgrades!

With the Angular Upgrade Bundle, you gain access to a comprehensive, tried-and-tested step-by-step process designed to make your Angular app upgrade experience smooth and efficient.

The bundle includes:

1. Angular Version Upgrade Checklist: An interactive HTML app that generates a detailed checklist for each version upgrade. Simply input your initial version and target version to get a precise, version-by-version guide.

2. Migration Guide: Follow along with a complete migration guide that covers converting old APIs into new, modern Angular syntax, including standalone components, inject functions, and signal APIs. This guide is perfect for ensuring your codebase leverages the latest Angular features and best practices.

3. Before and After Source Code: Access the complete source code for a functional full-stack chat application both before and after the migration process. This gives you a clear, real-world example to follow along with and understand how each change impacts the application.

Ultimate Angular Upgrade Bundle 2025

**🔥105 people bought this.**

Demo: [Material Theme Builder](https://materialthemebuilder.com)

This package includes

- Dynamic Theme Selector

- Landing Page Template

- Material Components Explorer

- Easy Theming CSS file

- Lifetime Updates!

Angular Material 3 Theme Builder

Let me know if you're interested in a full course on creating a complete Angular Material E-Commerce Application by signing up here!

As a bonus, **you'll also get a 30% discount** - whenever the course is launched

Angular Material E-Commerce Course (Wait List)

**🔥18 people bought this**

An interactive, animated Angular navbar - which hides when you scroll down, reappears as you scroll up and also appears when you hover over the navbar notch!

This makes it easier for your users to navigate to different parts of your app or website.

Also, it can be dropped in to any app with tailwindcss or you can use the animations with material toolbar and/or other component libraries.

Full tutorial on how you can build it here:

[https://youtu.be/CyjXqe0eaf4](https://youtu.be/CyjXqe0eaf4)

Angular Auto-Hiding Sticky Navbar with Motion One!

This is a cursor rules file for Modern Angular Development.

It covers the new Signals API, Control Flow, Standalone components, DI using inject function and Modern Angular Routing.

Supercharge your Angular development by using it with your AI based code editor!

Modern Angular Cursor Rules

**🔥 63 people bought this.**

A whatsApp inspired basic Angular Material Chat Application - integrated with Firebase Firestore DB.

Updated to the latest Angular v20 - using Signals and Resource APIs for reactivity!

WhatsApp-style Angular Chat App with Firestore DB and Material

**🔥 40 people bought this.**

A nifty CSS file which contains Angular Material 3 design tokens - which when included allow your app to change colors with just 6 basic colors!  
  
Try out the theme builder app using this: [https://material-theme-builder.zoaibkhan.com/](https://material-theme-builder.zoaibkhan.com/)  
  
This is a .css file which contains design tokens given values based on the 6 color angular material theme discussed in my video. It only needs to be included in your styles.scss file, and then your color CSS variables are going to work with material components in the upcoming v18 (which brings in design tokens)!

The usage instructions are included in the package as a text file.

Code Shop