Zoaib Khan
Zoaib Khan
  • 119
  • 731 137
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
มุมมอง: 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!
Modern Angular Lazy Loading Guide!
มุมมอง 3.1K4 หลายเดือนก่อน
Modern Angular Lazy Loading Guide!
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

ความคิดเห็น

  • @amritsahu5677
    @amritsahu5677 6 ชั่วโมงที่ผ่านมา

    The course is good. Concepts are explained nicely.

    • @ZoaibKhan
      @ZoaibKhan 2 นาทีที่ผ่านมา

      Glad you liked it!

  • @RobertParham-p6r
    @RobertParham-p6r 13 ชั่วโมงที่ผ่านมา

    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.

    • @ZoaibKhan
      @ZoaibKhan 6 ชั่วโมงที่ผ่านมา

      Glad that you liked it Robert! So you're more into short courses rather than detailed ones? :)

  • @RobertParham-p6r
    @RobertParham-p6r 15 ชั่วโมงที่ผ่านมา

    I need that bag. so tired of carrying all 15 of my laptops in separate bags.

    • @ZoaibKhan
      @ZoaibKhan 6 ชั่วโมงที่ผ่านมา

      lol 🤣

  • @mattpeterson1185
    @mattpeterson1185 18 ชั่วโมงที่ผ่านมา

    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!

    • @ZoaibKhan
      @ZoaibKhan 6 ชั่วโมงที่ผ่านมา

      Thanks Matt for your feedback and I'm glad you liked it :)

  • @emilkononczuk5801
    @emilkononczuk5801 21 ชั่วโมงที่ผ่านมา

    Can you make one widget to take whole row? Probably you need to set predefined number of columns with 4?

    • @ZoaibKhan
      @ZoaibKhan 21 ชั่วโมงที่ผ่านมา

      Yes, that's how we can extend to the whole row

  • @dilberadam
    @dilberadam วันที่ผ่านมา

    Is the api key supposed to be public? It sounds like something that you wouldn't want to show publically...

    • @ZoaibKhan
      @ZoaibKhan วันที่ผ่านมา

      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

  • @tuvok86
    @tuvok86 วันที่ผ่านมา

    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.

    • @ZoaibKhan
      @ZoaibKhan วันที่ผ่านมา

      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

  • @hamzasheikh1370
    @hamzasheikh1370 4 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 4 วันที่ผ่านมา

      Hmm, that's an interesting idea. Let me take a look and see if I can come up with something

  • @CivilEngineerAsWebDeveloper
    @CivilEngineerAsWebDeveloper 4 วันที่ผ่านมา

    Thank you for your video. If you create a nested menu on auto-hover show, it is for the top horizontal navbar.

    • @ZoaibKhan
      @ZoaibKhan 4 วันที่ผ่านมา

      Yeah, that would be like a menu bar instead of a sidebar. It can use the same data structure I agree

    • @CivilEngineerAsWebDeveloper
      @CivilEngineerAsWebDeveloper 2 วันที่ผ่านมา

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

  • @karvan101
    @karvan101 5 วันที่ผ่านมา

    Could you please share the code for switching???

    • @ZoaibKhan
      @ZoaibKhan 4 วันที่ผ่านมา

      Yup, here you go: github.com/thisiszoaib/angular-dark-mode

  • @chikna_engr
    @chikna_engr 5 วันที่ผ่านมา

    Should we start learning with angular 12/13/14 or we should start learning angular 18and 19

    • @ZoaibKhan
      @ZoaibKhan 5 วันที่ผ่านมา

      Angular 18 would be a good version to start with. Unless you have a legacy application in earlier versions

  • @chikna_engr
    @chikna_engr 5 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 5 วันที่ผ่านมา

      Check out my customizable dashboard series where we build a dashboard from scratch

    • @chikna_engr
      @chikna_engr 5 วันที่ผ่านมา

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

    • @ZoaibKhan
      @ZoaibKhan 5 วันที่ผ่านมา

      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

  • @sanjaypawar2166
    @sanjaypawar2166 6 วันที่ผ่านมา

    Hi, If product is "Out of Stock" then button "Add to Card" should be disable.

    • @ZoaibKhan
      @ZoaibKhan 6 วันที่ผ่านมา

      Yup, nice catch! There are lots of other UX improvements that can be made :)

  • @joewhite6300
    @joewhite6300 7 วันที่ผ่านมา

    Great explanation of this! Thank you

    • @ZoaibKhan
      @ZoaibKhan 7 วันที่ผ่านมา

      Hey Joe! Glad you liked it :)

  • @codeme8016
    @codeme8016 7 วันที่ผ่านมา

    Beautiful! Thanks a lot!

    • @ZoaibKhan
      @ZoaibKhan 7 วันที่ผ่านมา

      Glad you like it! :)

  • @thechaoslp2047
    @thechaoslp2047 8 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 7 วันที่ผ่านมา

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

    • @thechaoslp2047
      @thechaoslp2047 7 วันที่ผ่านมา

      @ZoaibKhan hi, yes - its been a bit frustrating since the official docs don't explain this at all

  • @tarun8987
    @tarun8987 8 วันที่ผ่านมา

    Great Job 👏🏻 Really very helpful and informative 〽️

    • @ZoaibKhan
      @ZoaibKhan 8 วันที่ผ่านมา

      Glad you liked it! 👍

  • @vrkv380
    @vrkv380 8 วันที่ผ่านมา

    Please add an example with material theme and tailwind

    • @ZoaibKhan
      @ZoaibKhan 8 วันที่ผ่านมา

      There is already a video on it. Check in my videos

  • @vrkv380
    @vrkv380 8 วันที่ผ่านมา

    Please add custom theme demo example

    • @ZoaibKhan
      @ZoaibKhan 8 วันที่ผ่านมา

      Yes, I will in future videos, hopefully soon!

  • @DirtySouth33T
    @DirtySouth33T 8 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 8 วันที่ผ่านมา

      Oh, let me know how it goes!

  • @codeaz5673
    @codeaz5673 8 วันที่ผ่านมา

    Done ✅

    • @ZoaibKhan
      @ZoaibKhan 8 วันที่ผ่านมา

      Great to hear that :)

  • @codeaz5673
    @codeaz5673 10 วันที่ผ่านมา

    thank u Sir. Can u make a video for upgrading this project angular v 19 please

  • @lakshanidisanayake
    @lakshanidisanayake 10 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 10 วันที่ผ่านมา

      No, this doesn't have any integration with a backend server.

    • @lakshanidisanayake
      @lakshanidisanayake 9 วันที่ผ่านมา

      @@ZoaibKhan do you have any video matching this question?

  • @shantanushukla1178
    @shantanushukla1178 10 วันที่ผ่านมา

    Thank you so much sir , it's really very very helpful.

    • @ZoaibKhan
      @ZoaibKhan 10 วันที่ผ่านมา

      Glad you found it helpful!

  • @substance90
    @substance90 11 วันที่ผ่านมา

    5:00 been there, done that. It was painful, believe me!

  • @prodrigu75
    @prodrigu75 11 วันที่ผ่านมา

    Excellent Angular 19 tutorial. I hope you soon create a tutorial where you use forms. Greetings from Santiago, Chile.

    • @ZoaibKhan
      @ZoaibKhan 11 วันที่ผ่านมา

      Thanks, glad you liked it! I almost added some forms stuff in this one as well, but then decided to keep it short

  • @SanuKSoman
    @SanuKSoman 11 วันที่ผ่านมา

    Great tutorial. Can you create one for Google sign in using redirection.

    • @ZoaibKhan
      @ZoaibKhan 11 วันที่ผ่านมา

      Good suggestion! I'll add it to my list :)

  • @brandenalexander6245
    @brandenalexander6245 12 วันที่ผ่านมา

    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.

    • @ZoaibKhan
      @ZoaibKhan 12 วันที่ผ่านมา

      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

    • @brandenalexander6245
      @brandenalexander6245 11 วันที่ผ่านมา

      @@ZoaibKhan In a way that's good! Keep up the great work!!

  • @codeaz5673
    @codeaz5673 12 วันที่ผ่านมา

    done ✅

    • @ZoaibKhan
      @ZoaibKhan 12 วันที่ผ่านมา

      👍

  • @MuraliK-s2y
    @MuraliK-s2y 12 วันที่ผ่านมา

    Nice sir make a video for role based auth and menu restriction

    • @ZoaibKhan
      @ZoaibKhan 12 วันที่ผ่านมา

      Yeah, that's a great suggestion. I have something in mind :)

  • @SaidMouhtadi-i6h
    @SaidMouhtadi-i6h 12 วันที่ผ่านมา

    Hey , when you choose one item multiple times and remove one of them , the remove button remove them all with one click !

    • @ZoaibKhan
      @ZoaibKhan 12 วันที่ผ่านมา

      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..

  • @SaidMouhtadi-i6h
    @SaidMouhtadi-i6h 12 วันที่ผ่านมา

    Hey , when you add same item multiple times to the cart , the remove button remove all of the items not one of them !

  • @MohamedAmineREGAYA
    @MohamedAmineREGAYA 13 วันที่ผ่านมา

    hello, what are you using for IA IN VSCODE ? Great-Work!

    • @ZoaibKhan
      @ZoaibKhan 13 วันที่ผ่านมา

      Supermaven! And hey 👋

  • @haroldpepete
    @haroldpepete 15 วันที่ผ่านมา

    great video, i have a simple question, object user in service authenticator, is it a writable signal?

    • @ZoaibKhan
      @ZoaibKhan 15 วันที่ผ่านมา

      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...

    • @haroldpepete
      @haroldpepete 15 วันที่ผ่านมา

      @ZoaibKhan that's what i think, why expose user signal and anyone could be write on it

  • @kashif.incredible-india
    @kashif.incredible-india 16 วันที่ผ่านมา

    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

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

      That's great to know, Kashif! Thanks for letting me know. How was your experience of migration from M2 to M3?

  • @anirudhcodes
    @anirudhcodes 16 วันที่ผ่านมา

    thanks!

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

      Glad you liked it :)

  • @JohnNoble-v2t
    @JohnNoble-v2t 16 วันที่ผ่านมา

    Love that this content is up to date using signals! I found this quite helpful, thanks.

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

      Glad you liked it! ☺️

  • @eantez2701
    @eantez2701 16 วันที่ผ่านมา

    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🥲

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

      Are you using Angular 19?

    • @eantez2701
      @eantez2701 16 วันที่ผ่านมา

      @@ZoaibKhan 18 , let me switch then try again

  • @f2b757
    @f2b757 16 วันที่ผ่านมา

    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)

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

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

    • @f2b757
      @f2b757 16 วันที่ผ่านมา

      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.

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

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

    • @ZoaibKhan
      @ZoaibKhan 16 วันที่ผ่านมา

      I'll be adding a setup guide as well to the Readme, so it shows you exactly how to set it up :)

    • @f2b757
      @f2b757 16 วันที่ผ่านมา

      Thanks!

  • @TheZukkino
    @TheZukkino 16 วันที่ผ่านมา

    Gratz for the tutorial, really clean. AppStore is an incredible tool to manage the AppState. Please do not stop publishing videos!

  • @davebudah
    @davebudah 17 วันที่ผ่านมา

    Thanks for this one

    • @ZoaibKhan
      @ZoaibKhan 17 วันที่ผ่านมา

      Welcome 🙂

  • @thechaoslp2047
    @thechaoslp2047 17 วันที่ผ่านมา

    Can you explain what issues there are currently with angularfire?

    • @ZoaibKhan
      @ZoaibKhan 17 วันที่ผ่านมา

      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.

  • @thechaoslp2047
    @thechaoslp2047 17 วันที่ผ่านมา

    Great tutorial

  • @balaramc3808
    @balaramc3808 18 วันที่ผ่านมา

    🎉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.👏

    • @ZoaibKhan
      @ZoaibKhan 18 วันที่ผ่านมา

      Glad you liked it 😊

  • @abishektamilan9733
    @abishektamilan9733 18 วันที่ผ่านมา

    need a full course on udemy sir pls

    • @ZoaibKhan
      @ZoaibKhan 18 วันที่ผ่านมา

      Ok :)

  • @haroldpepete
    @haroldpepete 19 วันที่ผ่านมา

    you have a new suscriber, it was a really helpful video

    • @ZoaibKhan
      @ZoaibKhan 19 วันที่ผ่านมา

      Glad you liked it and welcome to my channel :)

  • @juniorngomajose9454
    @juniorngomajose9454 20 วันที่ผ่านมา

    Thank You Zoaib 🙏🙏🙏

    • @ZoaibKhan
      @ZoaibKhan 19 วันที่ผ่านมา

      Welcome 🤗

  • @codeaz5673
    @codeaz5673 20 วันที่ผ่านมา

    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)?

    • @ZoaibKhan
      @ZoaibKhan 19 วันที่ผ่านมา

      Glad you liked it! And good suggestions. I'll see if I can create something about these topics

  • @davebudah
    @davebudah 22 วันที่ผ่านมา

    I requested for a Firebase integration, you delivered. Thanks man. Waiting for part 2.

    • @ZoaibKhan
      @ZoaibKhan 21 วันที่ผ่านมา

      Coming soon! :)

  • @darshanparmar4398
    @darshanparmar4398 22 วันที่ผ่านมา

    That is the best explanation waiting for part 2😃

    • @ZoaibKhan
      @ZoaibKhan 22 วันที่ผ่านมา

      Thanks, coming up early next week :)