#angular #ecommerce #tutorial
✨✨ Get the complete code for the Modern Angular Ecommerce App here:
https://zoaibkhan.com/shop/angular-ecommerce?utm_source=youtube&utm_medium=video&utm_campaign=ecommerce-tutorial-5
💻 Live demo: https://ngx-fullstack-ecommerce.vercel.app/
📽️ Become an Angular pro
https://zoaibkhan.com/tutorials
Build a checkout flow in Angular with Sign in/Sign up dialogs and a dummy authentication flow.
Socials:
Twitter – https://twitter.com/zoaibdev
Facebook – https://www.facebook.com/thisiszoaib
LinkedIn – https://www.linkedin.com/in/zoaib-khan-b6456815/
Sections:
0:00 Introduction & Demo Overview
1:37 Getting Started & Multi-Slot Content Projection
5:03 Setting Up Sign-In Dialog with Angular Material
7:11 Primer on Angular Forms (Template-Driven vs Reactive vs Signal Forms)
8:25 Creating Reactive Forms with FormBuilder
11:26 Testing the Sign-In Dialog
13:14 Configuring Material Form Field Defaults
15:20 Linking Form to Component & Form Validation
17:19 Creating User Models & Sign-In Types
19:05 Implementing Sign-In Functionality in Store
20:05 Parameterizing Dialogs for Context-Aware Authentication
23:43 Creating Checkout & Order Success Routes
24:51 Adding User Authentication State to Header
28:04 Implementing Sign-Out Functionality
28:55 Building Sign-Up Dialog
33:02 Using AI Tools for Repetitive Form Creation
35:46 Binding Header Buttons to Auth Dialogs
38:05 Building Checkout Page Layout
40:14 Creating Shipping Information Form
41:43 Creating Payment Options Form
43:20 Adding Line Items to Order Summary
46:39 Implementing Place Order Functionality
47:04 Creating Order Model & Validation
50:47 Building Order Success Page
52:14 Persisting State with Local Storage Sync
55:36 Next Steps & Conclusion
source
