- 119
- 731 137
Zoaib Khan
Pakistan
เข้าร่วมเมื่อ 17 พ.ย. 2020
Want to learn Angular development with real coding projects?
Join me as I teach you how to be a professional Angular developer by developing real world projects. I cover all of the latest and the greatest in Angular - including Signals, Standalone Components, Material Components and much more!
So hit the subscribe button - and let's get coding together!
Join me as I teach you how to be a professional Angular developer by developing real world projects. I cover all of the latest and the greatest in Angular - including Signals, Standalone Components, Material Components and much more!
So hit the subscribe button - and let's get coding together!
The New Super-Simple Way to Theme Angular Material (v19)
#angular #material #theming
In this video, I demonstrate the powerful new mat.theme mixin introduced in Angular Material version 19. Watch as I show the significant reduction in code needed to implement dark mode compared to version 12 and walks you through setting up global styles and component overrides with ease.
Code for the dark mode sample app here:
github.com/thisiszoaib/angular-dark-mode
✨✨ Get the complete code for my Angular Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9?
💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard
💖 Join my Patreon!
www.patreon.com/c/ZoaibKhan
Angular Material Theming Docs: material.angular.io/guide/theming
Material System CSS Variables: material.angular.io/guide/system-variables
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Socials:
Twitter - zoaibdev
Facebook - thisiszoaib
LinkedIn - www.linkedin.com/in/zoaib-khan-b6456815/
Sections:
00:00 Introduction and Overview
00:00 Upgrading Angular Material: Version 12 to 19
00:36 Introducing the Mat Theme Mixin
01:27 Setting Up the Default Theme
05:24 Implementing Dark Mode
07:16 Customizing System Variables
09:31 Showcasing the Angular Material Dashboard
14:00 Overriding Component Styles
19:22 Conclusion and Final Thoughts
In this video, I demonstrate the powerful new mat.theme mixin introduced in Angular Material version 19. Watch as I show the significant reduction in code needed to implement dark mode compared to version 12 and walks you through setting up global styles and component overrides with ease.
Code for the dark mode sample app here:
github.com/thisiszoaib/angular-dark-mode
✨✨ Get the complete code for my Angular Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9?
💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard
💖 Join my Patreon!
www.patreon.com/c/ZoaibKhan
Angular Material Theming Docs: material.angular.io/guide/theming
Material System CSS Variables: material.angular.io/guide/system-variables
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Socials:
Twitter - zoaibdev
Facebook - thisiszoaib
LinkedIn - www.linkedin.com/in/zoaib-khan-b6456815/
Sections:
00:00 Introduction and Overview
00:00 Upgrading Angular Material: Version 12 to 19
00:36 Introducing the Mat Theme Mixin
01:27 Setting Up the Default Theme
05:24 Implementing Dark Mode
07:16 Customizing System Variables
09:31 Showcasing the Angular Material Dashboard
14:00 Overriding Component Styles
19:22 Conclusion and Final Thoughts
มุมมอง: 1 697
วีดีโอ
Firebase Javascript SDK is all you need! Build Robust Authentication in Angular (2/2)
มุมมอง 71814 วันที่ผ่านมา
#angular #authentication #firebase In this video, we integrate Firebase authentication and Firestore database into our Angular dashboard. The tutorial moves away from Angular Fire due to compatibility issues and opts for the Firebase JavaScript SDK. ✨✨ Get the complete code for the Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular...
Build Robust Authentication in Your Angular App! (Part 1/2)
มุมมอง 1.7K21 วันที่ผ่านมา
#angular #authentication #dashboard In this video, learn how to implement a robust authentication system in your Angular application. Follow along as we add a login flow to an Angular dashboard, create various components, and integrate NGRX for state management. ✨✨ Get the complete code for Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link...
Modern Angular 19 Crash Course - E-commerce App!
มุมมอง 10Kหลายเดือนก่อน
#angular #course #modern Welcome to my Modern Angular 19 crash course! In this comprehensive video, I walk you through the latest features of Angular 19, helping you build a simple, two-page e-commerce application from scratch. ✨ Join the mailing list for my full course for an Ecommerce app! zoaibkhan.lemonsqueezy.com/buy/3866b9c6-ded5-4de6-9cbe-1659e0f0909f 🧑💻 Full source code for this simple...
Why NgRx Signal Store is My New Default | Angular State in 2024
มุมมอง 2.4Kหลายเดือนก่อน
#angular #ngrx #signals ✨✨ Get the dashboard (refactored to the ngrx signal store): zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard In this video, we explore the NgRx Signal Store for state management in Angular applications as of 2024. Learn why the NgRx Signal Store has become the preferred choice, how it s...
New Angular Material Docs make styling components a LOT easier!
มุมมอง 3.6Kหลายเดือนก่อน
#angular #material #design ✨✨ Get the sidebar here: zoaibkhan.lemonsqueezy.com/buy/c30c9d41-3f27-40ef-8bb8-99cc3a883b5a My patreon: www.patreon.com/c/ZoaibKhan Learn how to override design tokens for granular customization of your material components. We'll walk through customizing a TH-cam sidebar project to maintain a specific visual look using Material 3 theming APIs. This tutorial will be ...
Angular 19 Resource API is exactly what we needed!
มุมมอง 3.6Kหลายเดือนก่อน
#angular #signals #datafetching ✨Check out my humble Angular shop: zoaibkhan.lemonsqueezy.com/ 📽️ The problem with Angular Signals and Async Reactivity: th-cam.com/video/DGk6rjD3AG0/w-d-xo.html Learn more about the Resource API: push-based.io/article/everything-you-need-to-know-about-the-resource-api github.com/angular/angular/pull/58255 In this video, we dive into Angular 19's new experimental...
Combining Angular Material & Tailwind CSS - Best of Both Worlds!
มุมมอง 3.3K2 หลายเดือนก่อน
#angular #material #tailwindcss ✨✨ Get the dashboard: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard Join my Patreon! www.patreon.com/c/ZoaibKhan Playlist for the Angular Material Dashboard series th-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html 📽️ My courses: zoaibkhan.com/courses ✍️My blog for more...
Summarized: Angular Material 18 Dark Theming with System Color Variables!
มุมมอง 1.2K2 หลายเดือนก่อน
#angular #dashboard #material ✨✨ Get the dashboard: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 🔗 Official Material Foundation Theme Builder material-foundation.github.io/material-theme-builder/ In this video, we'll add a dark mode to our Angular Material Dashboard using Material Design System Color Variables! ✨ Theme Builder App with 6 colors: zoaibkhan.lemonsqueezy.com...
How to create Sleek Angular Material Forms?
มุมมอง 3.5K2 หลายเดือนก่อน
#angular #material #formsoftware ✨ Angular Shop: zoaibkhan.lemonsqueezy.com/ Join my Patreon! www.patreon.com/c/ZoaibKhan 📽️ My courses: zoaibkhan.com/courses ✍️My blog for more free Angular posts: zoaibkhan.com/blog In this video, I guide you through transforming large Angular Material form fields into sleek, compact designs. Leverage Angular Material's theming APIs and configuration settings...
Building a Drag & Drop Dashboard with Angular Material
มุมมอง 2K2 หลายเดือนก่อน
#angular #dashboard #material ✨✨ Get the dashboard: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard Playlist for the Customizable Dashboard series th-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html Video on System Colot Variables in Angular Material th-cam.com/video/rLtF6MzTRA0/w-d-xo.html 📽️ My courses:...
Angular Material 18 Dark Theming with System Color Variables!
มุมมอง 4K2 หลายเดือนก่อน
#angular #dashboard #material ✨✨ Get the dashboard: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 🎉 New shop link: zoaibkhan.lemonsqueezy.com/ 🔗 Official Material Foundation Theme Builder material-foundation.github.io/material-theme-builder/ In this video, we'll add a dark mode to our Angular Material Dashboard using Material Design System Color Variables! ✨ Theme Builder ...
EASY Draggable Dashboard with Angular CDK DropList!
มุมมอง 2.4K3 หลายเดือนก่อน
#angular #dashboard #interactive ✨✨ Get the complete code for the Angular Customizable Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard Playlist for the Customizable Dashboard series th-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html 📽️ My courses: zoaibkhan.com/courses ✍️My blog for more ...
Building a 3D Product Configurator with Angular Three!
มุมมอง 2.2K3 หลายเดือนก่อน
#angular #threejs #3d In this video, learn how to create a 3D product configurator using Angular and Angular 3. This tutorial covers the basics of setting up a 3D scene with Angular 3, using Tailwind CSS for styling, and employing 3.js for 3D rendering. Perfect for Angular developers looking to add interactive 3D components to their projects. ✨✨ Get the complete code here: zoaibkhan.lemonsqueez...
Angular Material Customizable Dashboard #3: More Customization and Animations!
มุมมอง 2.6K3 หลายเดือนก่อน
#angular #dashboard #animation ✨✨ Get the complete code for the Angular Customizable Dashboard here: zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9 💡 Live Dashboard Link: angular-dashboard-lime.vercel.app/dashboard 📽️ My courses: zoaibkhan.com/courses ✍️My blog for more free Angular posts: zoaibkhan.com/blog In the final part of the Angular Customizable Dashboard series, we...
Angular Material Customizable Dashboard #2: Adding Customization features!
มุมมอง 3.6K3 หลายเดือนก่อน
Angular Material Customizable Dashboard #2: Adding Customization features!
Angular Material Customizable Dashboard #1: Create reusable widget components
มุมมอง 9K3 หลายเดือนก่อน
Angular Material Customizable Dashboard #1: Create reusable widget components
Auto Hiding Sticky Navbar with Angular and Motion One!
มุมมอง 2.2K4 หลายเดือนก่อน
Auto Hiding Sticky Navbar with Angular and Motion One!
Building a Recursive Angular Sidebar Component
มุมมอง 3.3K4 หลายเดือนก่อน
Building a Recursive Angular Sidebar Component
Mastering Angular Component Communication!
มุมมอง 1.6K5 หลายเดือนก่อน
Mastering Angular Component Communication!
Are you using Angular Signal Effects in the RIGHT way?
มุมมอง 3.7K5 หลายเดือนก่อน
Are you using Angular Signal Effects in the RIGHT way?
How to make your Angular apps responsive with CDK Layout and CSS?
มุมมอง 4.5K6 หลายเดือนก่อน
How to make your Angular apps responsive with CDK Layout and CSS?
How to add reset password functionality with Angular and Firebase
มุมมอง 4936 หลายเดือนก่อน
How to add reset password functionality with Angular and Firebase
How to create a Nested Sidebar in Angular 18 with Material Components!
มุมมอง 13K6 หลายเดือนก่อน
How to create a Nested Sidebar in Angular 18 with Material Components!
How Angular Model Inputs helped me fix a weird bug in my app!
มุมมอง 8056 หลายเดือนก่อน
How Angular Model Inputs helped me fix a weird bug in my app!
I tested Angular 18 Zoneless mode and this is what I found out!
มุมมอง 3K6 หลายเดือนก่อน
I tested Angular 18 Zoneless mode and this is what I found out!
Easy, Dynamic Angular Material Theming with just 6 colors!
มุมมอง 12K7 หลายเดือนก่อน
Easy, Dynamic Angular Material Theming with just 6 colors!
Customizing Angular Material just got easier in v18!
มุมมอง 18K7 หลายเดือนก่อน
Customizing Angular Material just got easier in v18!
The problem with Angular Signals and Async Reactivity
มุมมอง 1.7K8 หลายเดือนก่อน
The problem with Angular Signals and Async Reactivity
The course is good. Concepts are explained nicely.
Glad you liked it!
I'm super happy with this. Tried a few different courses on Udemy but they were all much too in-depth. This was perfect. Thanks for taking the time to make this.
Glad that you liked it Robert! So you're more into short courses rather than detailed ones? :)
I need that bag. so tired of carrying all 15 of my laptops in separate bags.
lol 🤣
I'm blown away with the quality of this tutorial. Not only was I able to follow along, but I felt like I understood the concepts as presented. I appreciated the notes about best practices and why you specifically deviated from them for the purposes of scoping. In a sea of out-of-date information on Angular, it was refreshing to find something relevant. I'll be keeping an eye out for more content!
Thanks Matt for your feedback and I'm glad you liked it :)
Can you make one widget to take whole row? Probably you need to set predefined number of columns with 4?
Yes, that's how we can extend to the whole row
Is the api key supposed to be public? It sounds like something that you wouldn't want to show publically...
it is a public key - not a secret key and is part of the web app, so is visible in any case. There are other ways to secure access to your Firebase resources through security rules and referrer access restrictions on the google cloud console
Hi great content :) I bought the source code. Really good quality of the videos and the code itself. But with the update to @ngrx/signals version ^19.0.0 it stops working because of ERROR TypeError: Cannot add property __NG_ELEMENT_ID__, object is not extensible. I guess because the store now returns a readonly signal.
Thanks 👍 And yeah, I've yet to update the store to v19. My guess is it's because of storing the widget component because it's not serializable. But could be another issue
Really very helpful to me . can you please make a short video for typography also dynamic fonts size changes setting for dashboard or across application so admin can change font type and size Thanks
Hmm, that's an interesting idea. Let me take a look and see if I can come up with something
Thank you for your video. If you create a nested menu on auto-hover show, it is for the top horizontal navbar.
Yeah, that would be like a menu bar instead of a sidebar. It can use the same data structure I agree
@@ZoaibKhan Sir, the data structure would be the same but I am unable to manage SCSS which is not applicable for top horizontal navbar with the show menu on hovering not by click.
Could you please share the code for switching???
Yup, here you go: github.com/thisiszoaib/angular-dark-mode
Should we start learning with angular 12/13/14 or we should start learning angular 18and 19
Angular 18 would be a good version to start with. Unless you have a legacy application in earlier versions
Could you please start the angular tutorials series from basics to advance or make any type of dashboard application UI only that we can follow and understand how things works
Check out my customizable dashboard series where we build a dashboard from scratch
@@ZoaibKhan Could you please make a playlist of videos in your channel as i cant find as structure wise could you please make it in one playlist tab It could be named as Angular Dashboard from start to end for begginer as i dont know which video should i start with first and so on till the end
Here's the playlist for the dashboard - it includes all of the videos related to it in sequence. This playlist is also shown on my main channel page. th-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html
Hi, If product is "Out of Stock" then button "Add to Card" should be disable.
Yup, nice catch! There are lots of other UX improvements that can be made :)
Great explanation of this! Thank you
Hey Joe! Glad you liked it :)
Beautiful! Thanks a lot!
Glad you like it! :)
Hello, I have a question How can I use the different shades of the color palette provided by angular? Like azure, cherry etc. Before you had a function for it, but i cannot get it to work Like for example I want to use the 500 shade of the mat.azure color in my scss how can I do that? Thank you
Not really sure, because there is no mention of this in the guides. I'm sure there must be an easy way to do it in Sass - but not that great of a Sass guy myself :)
@ZoaibKhan hi, yes - its been a bit frustrating since the official docs don't explain this at all
Great Job 👏🏻 Really very helpful and informative 〽️
Glad you liked it! 👍
Please add an example with material theme and tailwind
There is already a video on it. Check in my videos
Please add custom theme demo example
Yes, I will in future videos, hopefully soon!
glad you touched on this! lol thanks brother! I am going to have to change tailwind and things like that to now include --mat- var
Oh, let me know how it goes!
Done ✅
Great to hear that :)
thank u Sir. Can u make a video for upgrading this project angular v 19 please
D Make an application for the storefront in one of these frameworks Angular, React, or Vue. The website must integrate with a web service that has its own local database and display products from it. The website must integrate with an appropriate external web service and display information from it . The website must have a well design. C All from level D in addition to the following task: The app must add new, update and delete information (CRUD) from the previous web service(in D) . B All from level C, D in addition to the following task: Create a shopping cart where users can manage the products they want to buy. this assignment match this video? please explain
No, this doesn't have any integration with a backend server.
@@ZoaibKhan do you have any video matching this question?
Thank you so much sir , it's really very very helpful.
Glad you found it helpful!
5:00 been there, done that. It was painful, believe me!
Excellent Angular 19 tutorial. I hope you soon create a tutorial where you use forms. Greetings from Santiago, Chile.
Thanks, glad you liked it! I almost added some forms stuff in this one as well, but then decided to keep it short
Great tutorial. Can you create one for Google sign in using redirection.
Good suggestion! I'll add it to my list :)
Perfect for those that have prior knowledge on MVC design pattern. As for total beginner that has never dealt with MVC, this isn't really for you, it lacks explanation for example, the data flow from parent to child component in the "cart" part. But I find it quite good because it forced me to ask the "why" instead of just following a tutorial.
Thanks for the feedback! The parent-child communication can also be seen in the reusable button component with the input and output. I've tried to cover more common ways of doing basic stuff in Angular esp in newer versions, so some detail might've been skipped
@@ZoaibKhan In a way that's good! Keep up the great work!!
done ✅
👍
Nice sir make a video for role based auth and menu restriction
Yeah, that's a great suggestion. I have something in mind :)
Hey , when you choose one item multiple times and remove one of them , the remove button remove them all with one click !
Yes, that is because there is no quantity being handled as yet. You're welcome to try adding it yourself (I skipped it to save time). Ideally, it should show the same product only once in the cart list - but should increase quantity as we add more of the same product. But then we also need to add a + and - button to increase or reduce the quantity - besides the remove item button..
Hey , when you add same item multiple times to the cart , the remove button remove all of the items not one of them !
hello, what are you using for IA IN VSCODE ? Great-Work!
Supermaven! And hey 👋
great video, i have a simple question, object user in service authenticator, is it a writable signal?
yes, it is, because we need to set the user value from the firebase auth observer. We can however keep that one readonly and private and create a computed from it to expose it to the outside - that way the signal is not changed from the outside...
@ZoaibKhan that's what i think, why expose user signal and anyone could be write on it
In one of the project, i have to to migration M2-> M3, Your vides really help me a lot in migration, Thank for the videos
That's great to know, Kashif! Thanks for letting me know. How was your experience of migration from M2 to M3?
thanks!
Glad you liked it :)
Love that this content is up to date using signals! I found this quite helpful, thanks.
Glad you liked it! ☺️
Output and Input in my end works only as a decorator @Input() label: string = ''; @Output() btnClicked = new EventEmitter<void>(); Instead of the way you are usin it btnClicked = output(); and label = input(' '); am a beginner🥲
Are you using Angular 19?
@@ZoaibKhan 18 , let me switch then try again
Good day, yesterday I got the Dashboard and I still can’t it up, I’m getting this error: FirebaseError: Firebase:Error(auth/invalid-api-key)
Hey! You need to go in firebase.service and replace the firebaseConfig with your own Firebase projects config. Try that out and let me know :)
After having my own Firebase configuration, the project is up and running. Now, what credentials should I use? I'm getting “invalid email or password” with the credentials you provide, even though I check the request and the error is “400 Bad Request”. Can you help me? Sorry, I'm new to this world.
@f2b757 Just add a new user with password on the Firebase developer console and also add a users collection in firebase. Check out my latest video for more info where I show all of this.
I'll be adding a setup guide as well to the Readme, so it shows you exactly how to set it up :)
Thanks!
Gratz for the tutorial, really clean. AppStore is an incredible tool to manage the AppState. Please do not stop publishing videos!
Thanks for this one
Welcome 🙂
Can you explain what issues there are currently with angularfire?
Well, the issues are basically in compatibility with different Angular versions. So at the installation stage - and it can be really frustrating. E.g. in v16, I had to have exact versions of angular fire and rxfire to get it working (I was creating a course on Authentication back then). Second is angular fire now basically just re exports the same firebase js SDK modular functions - so the need for it has become less.
Great tutorial
🎉Superb Sir, Each and everything you’re explained in the single video. Thank you so much for your valuable time and eplaining the single code and functionality with documents and helps to both fresher and experiences.👏
Glad you liked it 😊
need a full course on udemy sir pls
Ok :)
you have a new suscriber, it was a really helpful video
Glad you liked it and welcome to my channel :)
Thank You Zoaib 🙏🙏🙏
Welcome 🤗
Hello, Sir. Thank you for the excellent video! Could you please explain refresh tokens and how to handle errors in interceptors (e.g., 403 and 401)?
Glad you liked it! And good suggestions. I'll see if I can create something about these topics
I requested for a Firebase integration, you delivered. Thanks man. Waiting for part 2.
Coming soon! :)
That is the best explanation waiting for part 2😃
Thanks, coming up early next week :)