- 118
- 716 718
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!
Firebase Javascript SDK is all you need! Build Robust Authentication in Angular (2/2)
#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-dashboard-lime.vercel.app/dashboard
💖 Join my Patreon!
www.patreon.com/c/ZoaibKhan
Playlist for the Angular Material Dashboard series
ua-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html
How to create sleek Angular Material form fields!
ua-cam.com/video/Ji62CoFU630/v-deo.html
📽️ 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 Recap
01:20 Setting Up Firebase
02:49 Creating Firebase Service
05:06 Implementing Authentication Service
06:28 Handling User State and Observers
10:18 Integrating Authentication with UI
18:14 Final Touches and Error Handling
19:09 Conclusion and Future Plans
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-dashboard-lime.vercel.app/dashboard
💖 Join my Patreon!
www.patreon.com/c/ZoaibKhan
Playlist for the Angular Material Dashboard series
ua-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html
How to create sleek Angular Material form fields!
ua-cam.com/video/Ji62CoFU630/v-deo.html
📽️ 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 Recap
01:20 Setting Up Firebase
02:49 Creating Firebase Service
05:06 Implementing Authentication Service
06:28 Handling User State and Observers
10:18 Integrating Authentication with UI
18:14 Final Touches and Error Handling
19:09 Conclusion and Future Plans
Переглядів: 575
Відео
Build Robust Authentication in Your Angular App! (Part 1/2)
Переглядів 1,5 тис.День тому
#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!
Переглядів 7 тис.14 днів тому
#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,1 тис.Місяць тому
#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,3 тис.Місяць тому
#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 UA-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,4 тис.Місяць тому
#angular #signals #datafetching ✨Check out my humble Angular shop: zoaibkhan.lemonsqueezy.com/ 📽️ The problem with Angular Signals and Async Reactivity: ua-cam.com/video/DGk6rjD3AG0/v-deo.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 тис.Місяць тому
#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 ua-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,1 тис.Місяць тому
#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,2 тис.2 місяці тому
#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
Переглядів 1,9 тис.2 місяці тому
#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 ua-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html Video on System Colot Variables in Angular Material ua-cam.com/video/rLtF6MzTRA0/v-deo.html 📽️ My courses: ...
Angular Material 18 Dark Theming with System Color Variables!
Переглядів 3,8 тис.2 місяці тому
#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,2 тис.2 місяці тому
#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 ua-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,1 тис.3 місяці тому
#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,5 тис.3 місяці тому
#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,4 тис.3 місяці тому
#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 Playlist for the Angular sidebar tutorial ua-cam.com/play/PLHbz-DWIAPJC9QksAO1PHobAGXde3CgIz.html 📽️ My courses: zoaibkhan.com/courses ✍️My blog for more free An...
Angular Material Customizable Dashboard #1: Create reusable widget components
Переглядів 9 тис.3 місяці тому
Angular Material Customizable Dashboard #1: Create reusable widget components
Auto Hiding Sticky Navbar with Angular and Motion One!
Переглядів 2,2 тис.3 місяці тому
Auto Hiding Sticky Navbar with Angular and Motion One!
Building a Recursive Angular Sidebar Component
Переглядів 3,2 тис.4 місяці тому
Building a Recursive Angular Sidebar Component
Mastering Angular Component Communication!
Переглядів 1,6 тис.4 місяці тому
Mastering Angular Component Communication!
Are you using Angular Signal Effects in the RIGHT way?
Переглядів 3,6 тис.5 місяців тому
Are you using Angular Signal Effects in the RIGHT way?
How to make your Angular apps responsive with CDK Layout and CSS?
Переглядів 4,4 тис.5 місяців тому
How to make your Angular apps responsive with CDK Layout and CSS?
How to add reset password functionality with Angular and Firebase
Переглядів 4835 місяців тому
How to add reset password functionality with Angular and Firebase
How to create a Nested Sidebar in Angular 18 with Material Components!
Переглядів 12 тис.6 місяців тому
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!
Переглядів 7946 місяців тому
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!
Переглядів 2,9 тис.6 місяців тому
I tested Angular 18 Zoneless mode and this is what I found out!
Easy, Dynamic Angular Material Theming with just 6 colors!
Переглядів 11 тис.7 місяців тому
Easy, Dynamic Angular Material Theming with just 6 colors!
Customizing Angular Material just got easier in v18!
Переглядів 17 тис.7 місяців тому
Customizing Angular Material just got easier in v18!
The problem with Angular Signals and Async Reactivity
Переглядів 1,7 тис.7 місяців тому
The problem with Angular Signals and Async Reactivity
How to add Quick Search to your Angular app with Google Books API!
Переглядів 9348 місяців тому
How to add Quick Search to your Angular app with Google Books API!
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 :)
Sir, how can we do authentication if ssr is enabled?
That's a good question. I haven't done it myself, so can't say. But from what I've read, things should work ok as they are - except for the firebase authentication part (which requires a bit of extra setup so that it works well). More on this (check note at bottom of this link's section 2): firebase.google.com/docs/web/setup#add-sdks-initialize
thx for the great effort and amazing tutorial .. the only thing I may say missing or wished it was there is performing post request with services and httpclient.. and since this is a modern angular it would've been nice to see handling get request using resource .. I would love to see a follow up covering the above topic .. overall amazing tutorial and very helpful .. thanks
Glad you liked it 😊 About the resource API, I would've loved to use it here but avoided due to it being experimental at this time. For post requests, I can understand. Hopefully, will be able to cover it in my full course where there'll be a proper severless framework like firebase or supabase
Jazak Allah Khaira, i like the way of you teaching , and waiting for part 2
Early next week hopefully and thanks 🙏
Thanks Zoaib 👏
Welcome 😊
@@ZoaibKhan Firebase is so good! It serves Angular well (Google family). I got the dashboard running. And thank you for updating to ng19! Bravo
Great tutorial!
Glad you liked it ☺️
done ✅
done ✅
done ✅
Thank you Sir. Done ✅
so i am kind of frustrated that they changed the material theming api again, maybe im crazy but moving from 18 to 19 is a larger jump now they changed the way it works
Oh is that really? Will have to check it out myself as well. I just upgraded the dashboard yesterday to v19 and didn't need to update the theming syntax at all myself. It did do some things automatically though...
Hello, Sir. the video of building the template is in your channel? Because I can't find it
You mean building the theme builder app?
@ZoaibKhan yes sir the app thst you showed in this video
thank you Sir. Done ✅ My goal is to finish all your videos!
Thanks for showing such interest ☺️
done✅
done ✅
Thank you Sir. Can u please make a video angular with echarts library and angular material please
Ok noted.
@@ZoaibKhan Thank you Sir
done ✅
I love how you make useful videos instead of boring and useless contents. Keep going Sir. Thank you for everything! Done ✅
Thanks for your kind words! 🙏
done ✅
done ✅
Woah, this is really good. Exactly what I was looking for.
Glad you found it useful 🙂
Hey Zoab, can you give us a firebase course, man. Most tutorials are as detailed. There is much Firebase Auth tutorials and that's all. We need something that covers Auth, File handling, a complete CRUD. Even if you make it a paid course Im sure it will be worth it.
Thanks Farhan! Noted your suggestion and let's see if I can accommodate them in my course. I'm leaning towards firebase for it's backend, but might change because considering supabase as well.
@@ZoaibKhan Thank you man.
thank you so much for the crash course and yes, I'm interested on that full e-commerce!
Glad you liked it! I'll keep you posted :)
thank u sir
thank u Sir