Modern Angular 19 Crash Course - E-commerce App!

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 86

  • @mattpeterson1185
    @mattpeterson1185 Месяц назад +4

    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  Месяц назад

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

  • @ArifMatubber-km4nv
    @ArifMatubber-km4nv 2 месяца назад +4

    Awesome! Thank you so much for teaching in such a simple way.

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      You're welcome, Arif! :)

  • @farhankhamran
    @farhankhamran 2 месяца назад +3

    Thanks man, there is always something new to learn from you.

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад +1

      Glad you found it helpful, Farhan!

  • @RobertParham-p6r
    @RobertParham-p6r Месяц назад +1

    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  Месяц назад

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

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 2 месяца назад

    Very cool. I am so loving these new features, it has totally transformed how we write application. Signals are such a game changer

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      Thanks Lars! Glad you liked the mini course. That was the point of creating this, so more people can appreciate the direction in which Angular is moving towards :)

  • @irondesagitario
    @irondesagitario 2 месяца назад

    thank you so much for the crash course and yes, I'm interested on that full e-commerce!

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      Glad you liked it! I'll keep you posted :)

  • @miss_aishya
    @miss_aishya Месяц назад

    Great tutorial to understand Signals . keep posting such useful videos on Angular 🙏

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Glad you liked it 😊

  • @PK-vg9df
    @PK-vg9df 2 месяца назад +9

    I am an experienced Angular Developer, but I have never dived deep into Signals. I am all into RXJS. I always learn something new here. Nice Video. Keep going!

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад +3

      Thanks man! I am a fan of RxJS as well, but have restricted it's use to async methods

    • @LarsRyeJeppesen
      @LarsRyeJeppesen 2 месяца назад +1

      You should! it's insanely awesome and you'll never go back. Reactive programming is so awesome!

    • @brianm2029
      @brianm2029 2 месяца назад +1

      I’m also easing into signals.
      I like the fact that I can use pipes with observables even by doing of(2).pipe(…) 😂
      I’m learning signals now too and found the experimentals in angular 19 to be interesting

  • @kyllocity
    @kyllocity 9 дней назад

    Learned about signals from this video. Thanks.

    • @ZoaibKhan
      @ZoaibKhan  8 дней назад +1

      Glad it was useful!

  • @balaramc3808
    @balaramc3808 Месяц назад

    🎉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  Месяц назад

      Glad you liked it 😊

  • @brandenalexander6245
    @brandenalexander6245 Месяц назад +1

    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  Месяц назад

      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 Месяц назад

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

  • @ninosalkaton4461
    @ninosalkaton4461 2 месяца назад +2

    Thanks for the project, i hope to add quentity to the project

  • @amritsahu5677
    @amritsahu5677 Месяц назад

    The course is good. Concepts are explained nicely.

  • @ajesh-mishra
    @ajesh-mishra 2 месяца назад +1

    This is simple and sweet 👍🏻

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      Glad you found it helpful!

  • @SaidMouhtadi-i6h
    @SaidMouhtadi-i6h Месяц назад +2

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

  • @manishboge94
    @manishboge94 2 месяца назад

    Thank you for the efforts in creating this crash course, Zoaib ji! Great explaination for understanding fundamentals of signals in real -time! A must recommended crash course to understand signal usecases.!!

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      Thanks Manish for your kind words! And glad you liked it :)

  • @goughventer4542
    @goughventer4542 18 часов назад

    Very nice Zoaib, love your work... Can you recommend an admin template that has been written with Signals and these other Angular 19 features from the ground up, not just a backward compatible upgrade?

    • @ZoaibKhan
      @ZoaibKhan  17 часов назад

      Thanks! It's been a while since I've worked with any other admin templates. I really love the fuse theme template, but haven't seen the latest code for it to see if it's using signals and the latest features.
      I do have one of my own as well - which I've been building on this channel and using on a project as well. You can find it here:
      zoaibkhan.lemonsqueezy.com/buy/4bc3b34d-4980-44be-80bc-bde1dc5b71e9
      I've tried to make it a good starter template with best practices as I use in my own projects. And am continuously updating it as well (e.g. added view transition API in my latest video).

  • @prodrigu75
    @prodrigu75 Месяц назад +1

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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

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

  • @nenenene6935
    @nenenene6935 22 дня назад

    what extensions are you using to enable syntax highlighting in template strings?

    • @ZoaibKhan
      @ZoaibKhan  22 дня назад

      Angular Language Service

  • @htoofe
    @htoofe Месяц назад

    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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      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

  • @ethiotech10
    @ethiotech10 Месяц назад

    Great tutorial!

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Glad you liked it ☺️

  • @tommyhildoan
    @tommyhildoan 26 дней назад

    Thanks for this tutorial. Loved it - do you have a 101 on how to get this project deployed on to github pages?

    • @ZoaibKhan
      @ZoaibKhan  26 дней назад

      Glad to hear that, Tommy! But sorry, no guide for GitHub pages. I deployed this on vercel though and was pretty simple.

  • @MohamedAmineREGAYA
    @MohamedAmineREGAYA Месяц назад

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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Supermaven! And hey 👋

  • @codeaz5673
    @codeaz5673 Месяц назад

    Thank you Sir.
    Done ✅

  • @abishektamilan9733
    @abishektamilan9733 Месяц назад +2

    need a full course on udemy sir pls

  • @SaidMouhtadi-i6h
    @SaidMouhtadi-i6h Месяц назад

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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад +1

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

  • @SEOSepeti
    @SEOSepeti 2 месяца назад

    Thanks for this awesome crash course, man. I have a question. Will you cover Redis in the course? Thank you.

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      You mean Redis the temporary db?

    • @SEOSepeti
      @SEOSepeti 2 месяца назад

      @@ZoaibKhan Yes, I am talking about Redis as a temporary database, for example, storing unconfirmed shopping cart data in Redis.

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад

      @@SEOSepeti well, not sure about that. For temporary cart data, I'll probably just use normal state plus maybe local storage so that it's saved across refreshes.
      What's your take on it? :)

    • @SEOSepeti
      @SEOSepeti 2 месяца назад

      @@ZoaibKhan No problem at all, I’m eagerly looking forward to your course! 📚🚀😊

  • @farhankhamran
    @farhankhamran 2 месяца назад +1

    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.

    • @ZoaibKhan
      @ZoaibKhan  2 месяца назад +1

      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.

    • @farhankhamran
      @farhankhamran 2 месяца назад

      @@ZoaibKhan Thank you man.

  • @sanjaypawar2166
    @sanjaypawar2166 Месяц назад

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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

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

  • @מיכלקיסר
    @מיכלקיסר Месяц назад

    New star

  • @imakethesites3048
    @imakethesites3048 10 дней назад

    Thanks for this, but here's an interesting update: due to a VERY recent Tailwind update, both the URL to the installation page AND the commands to run at installation have changed. Just goes to show: as much as we try to be up to date, web development marches on!

    • @ZoaibKhan
      @ZoaibKhan  9 дней назад +1

      Aah, we can only try so much, I agree :)
      Hopefully, not many surprises after the initial installation stage 🤞

    • @imakethesites3048
      @imakethesites3048 9 дней назад

      @@ZoaibKhan The rest of the tutorial worked fine and was very enlightening. It was just a matter of installation.

  • @anirudhcodes
    @anirudhcodes Месяц назад

    thanks!

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Glad you liked it :)

  • @lakshanidisanayake
    @lakshanidisanayake Месяц назад

    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  Месяц назад

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

    • @lakshanidisanayake
      @lakshanidisanayake Месяц назад

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

  • @RobertParham-p6r
    @RobertParham-p6r Месяц назад

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

  • @DirtySouth33T
    @DirtySouth33T 2 месяца назад

    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

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад +1

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

  • @criticalthinker1123
    @criticalthinker1123 Месяц назад

    *I stopped watching @ **5:24** I thought he'll cover the new features, but this isn't the case.*

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Thanks for watching for 5 mins and your feedback :)

    • @criticalthinker1123
      @criticalthinker1123 Месяц назад

      @ZoaibKhan I am actually watching it lol 😅

  • @josbexerra8115
    @josbexerra8115 День назад

    Muchas gracias mister Zoya

  • @eantez2701
    @eantez2701 Месяц назад

    Output and Input in my end works only as a decorator @Input() label: string = '';
    @Output() btnClicked = new EventEmitter();
    Instead of the way you are usin it
    btnClicked = output(); and label = input(' '); am a beginner🥲

    • @ZoaibKhan
      @ZoaibKhan  Месяц назад

      Are you using Angular 19?

    • @eantez2701
      @eantez2701 Месяц назад

      @@ZoaibKhan 18 , let me switch then try again