Mastering Angular 17 | From Basics to Advanced | Learn Angular 17 in Arabic | كورس انجلار للمبتدئين
- Repo: https://github.com/marobakr/Angular17-Ecommerce-Tutorial
- Ecommerce API :https://fakestoreapi.in
- Auth API PostMan: https://www.postman.com/universal-crater-750302/ecommerce/collection/ucq9ztq/ecommerce-apis?action=share&creator=32330893
----
Welcome to the "Mastering Angular 17 | From Basics to Advanced" playlist! This playlist is your comprehensive guide to learning Angular 17 from the ground up, all in Arabic. Whether you're a complete beginner or an experienced developer, you'll find everything you need to become an Angular expert.
----
In this series, we cover Angular 17's essential features, from setting up your development environment to mastering advanced topics such as components, services, routing, state management, and performance optimization. Learn how to build dynamic, scalable, and high-performance web applications using Angular.
----
What You'll Learn:
- Introduction to Angular 17 and its core concepts
- Setting up your Angular development environment
- Working with components, templates, and data binding
- Understanding Angular services and dependency injection
- Implementing routing and navigation in Angular apps
- Best practices for building maintainable Angular applications
- Advanced topics such as lazy loading, Angular modules, and performance optimization
----
Perfect for:
- Developers new to Angular or those upgrading to Angular 17
- Arabic-speaking developers who want to learn Angular in their native language
- Anyone looking to build modern, scalable web applications with Angular
- Start your journey to mastering Angular 17 today and build powerful web applications with ease!
Curated by: GeekCode (107 videos)
Currently Playing: Learn Angular 17 in Arabic | #63 Master Angular: Creating Custom Validation for FormGroup
In this tutorial, we delve into creating custom validation for FormGroup in Angular's Reactive Forms.
You'll learn:
- How to implement a custom group-level validator to validate multiple fields within a FormGroup.
- Using AbstractControl and ValidatorFn to define reusable validation logic.
- Practical examples for enforcing complex validation rules.
- Displaying user-friendly error messages for group-level validation errors.
By the end of this video, you'll be equipped to build robust forms with
- advanced validation logic tailored to your application's needs.
----
Key Takeaways:
- Understand the difference between field-level and group-level validation.
- Learn to write a custom ValidatorFn for FormGroup.
- Examples of validating relationships between fields in a FormGroup.
- Best practices for managing validation logic and error messages.
- Improve form usability and data integrity with custom validation.
----
#Angular #ReactiveForms #FormValidation #CustomValidation #FormGroup #AngularForms #Angular17 #WebDevelopment #FrontendDevelopment #AngularTutorial #FormHandling #AngularBestPractices #MasterAngular #FormCreation #AngularProjects #ValidationLogic #FormGroupValidation #ComplexValidation
Tracks in this Playlist
- Learn Angular 17 in Arabic | #0 Introduction to Angular: What You Need to Know Before You Start
- Learn Angular 17 in Arabic | #1 Understanding Component Based Architecture in Angular
- Learn Angular 17 in Arabic | #2 Overview of Files and Folders in an Angular Project
- Learn Angular 17 in Arabic | #3 Understanding Angular CLI Commands:ng serve with open and hmr
- Learn Angular 17 in Arabic | #4 Creating Angular Components: Manually VS Using the CLI
- Learn Angular 17 in Arabic | #5 One Way Data Binding: Interpolation,Attribute and Property Binding
- Learn Angular 17 in Arabic | #6 Understanding the Difference Between Data Interpolation and Property
- Learn Angular 17 in Arabic | #7 Angular Binding Techniques: Style Binding and Class Binding
- Learn Angular 17 in Arabic | #8 Mastering Event Binding in Angular
- Learn Angular 17 in Arabic | #9 Understanding Two Way Data Binding in Angular Using ngModel
- Learn Angular 17 in Arabic | #10 Mastering Standalone Components in Angular 16 & 17
- Learn Angular 17 in Arabic | #11 Understanding Angular Directives: ngClass vs ngStyle
- Learn Angular 17 in Arabic | #12 Mastering Angular Directives: ngIf & ngSwitch
- Learn Angular 17 in Arabic | #13 Mastering the ngFor Directive in Angular: Build Dynamic Lists
- Learn Angular 17 in Arabic | #14 Angular Structural Directives: ngTemplate vs ngContainer Explained
- Learn Angular 17 in Arabic | #15 Angular Control Flow: Mastering @if & @switch
- Learn Angular 17 in Arabic | #16 Angular 17 New Syntax: Mastering @for for Dynamic Lists
- Learn Angular 17 in Arabic | #17 Angular TrackBy: Understanding the Old Syntax & New Syntax
- Learn Angular 17 in Arabic | #18 Passing Data Between Parent & Child Components with @Input
- Learn Angular 17 in Arabic | #19 Master Angular: Passing Alias, Required and Transforms with @Input
- Learn Angular 17 in Arabic | #20 Master Angular: Transfer Data from Child to Parent with @Output
- Learn Angular 17 in Arabic | #21 Master Angular: Content Projection with ngContent
- Learn Angular 17 in Arabic | #22 Master Angular: Accessing Child Elements with @ViewChild Decorator
- Learn Angular 17 in Arabic | #23 Master Angular: Access Child Components with @ViewChild Decorator
- Learn Angular 17 in Arabic | #24 Master Angular: Access Multiple Child Elements with @ViewChildren
- Learn Angular 17 in Arabic | #25 Master Angular: Access Multiple Child Components with @ViewChildren
- Learn Angular 17 in Arabic | #26 Master Angular: Understanding main.ts and main.server.ts Files
- Learn Angular 17 in Arabic | #27 Master Angular: @ContentChild for Content Projecting
- Learn Angular 17 in Arabic | #28 Master Angular: @ContentChildren Access Multiple Content Projected
- Learn Angular 17 in Arabic | #29 Master Angular: Introduction to Component Lifecycle Hooks
- Learn Angular 17 in Arabic | #30 Master Angular: ngOnInit, ngOnChanges, and ngDoCheck Hooks
- Learn Angular 17 in Arabic | #31 Master Angular: Understanding AfterContentInit , AfterViewChecked
- Learn Angular 17 in Arabic | #32 Master Angular: Best Practices for Implementing Lifecycle Interface
- Learn Angular 17 in Arabic | #33 Master Angular: Introduction to Routing (Part 01)
- Learn Angular 17 in Arabic | #34 Master Angular: Wildcard Routes, Titles, and Configuring (Part 02)
- Learn Angular 17 in Arabic | #35 Master Angular: RouterLinkActive & RouterLink with Navbar (Part 03)
- Learn Angular 17 in Arabic | #36 Master Angular: Understanding Nested Routes
- Learn Angular 17 in Arabic | #37 Master Angular: Lazy Loading with LoadComponent and LoadChildren
- Learn Angular 17 in Arabic | #38 Master Angular: Enabling Client-Side Hydration (Part 01)
- Learn Angular 17 in Arabic | #39 Master Angular: Enabling Client-Side Hydration (Part 02)
- Learn Angular 17 in Arabic | #40 Master Angular: ViewEncapsulation - Emulated vs None (Part 01)
- Learn Angular 17 in Arabic | #41 Master Angular: ViewEncapsulation with ShadowDom (Part 02)
- Learn Angular 17 in Arabic | #42 Master Angular: Exploring Built-In Pipes in Angular (Part 01)
- Learn Angular 17 in Arabic | #43 Master Angular: Creating and Using Custom Pipes (Part 02)
- Learn Angular 17 in Arabic | #44 Master Angular: Advanced Example of Creating Custom Pipes (Part 03)
- Learn Angular 17 in Arabic | #45 Master Angular: Understanding Impure and Pure Pipes (Part 04)
- Learn Angular 17 in Arabic | #46 Master Angular:Introduction to Creating and Using Custom @Directive
- Learn Angular 17 in Arabic | #47 Master Angular: Build a Custom @Directive with @HostListener
- Learn Angular 17 in Arabic | #48 Master Angular: Dynamic Custom @Directive With Inputs Property
- Learn Angular 17 in Arabic | #49 Master Angular: Dynamic Custom Directive with @Input and @Output
- Learn Angular 17 in Arabic | #50 Master Angular: Custom Directive with @HostBinding
- Learn Angular 17 in Arabic | #51 Master Angular: Exploring Options for Custom @Directive | exportAs
- Learn Angular 17 in Arabic | #52 Master Angular: Lazy Loading with @Defer (Part 01)
- Learn Angular 17 in Arabic | #53 Master Angular: Lazy Loading with @Defer (Part 02)
- Learn Angular 17 in Arabic | #54 Master Angular: Forms Intro | Reactive form vs Template-Driven Form
- Learn Angular 17 in Arabic | #55 Master Angular: Deep into Template-Driven Form | Advanced Example
- Learn Angular 17 in Arabic | #56 Master Angular: Reactive Form with Built-in Validation (part 01)
- Learn Angular 17 in Arabic | #57 Master Angular: FormGroup, FormControl, FormControlName (Part 02)
- Learn Angular 17 in Arabic | #58 Master Angular: Understanding setValue, patchValue, valueChanges
- Learn Angular 17 in Arabic | #59 Master Angular: Understanding FormGroupName (Part 04)
- Learn Angular 17 in Arabic | #60 Master Angular: New Syntax to Create FormControl & FormGroup
- Learn Angular 17 in Arabic | #61 Master Angular: New Syntax with FormBuilder
- Learn Angular 17 in Arabic | #62 Master Angular: Creating Custom Validation for FormControl
- Learn Angular 17 in Arabic | #63 Master Angular: Creating Custom Validation for FormGroup
- Learn Angular 17 in Arabic | #64 Master Angular: Validation Functions with Parameter (Part 09)
- Learn Angular 17 in Arabic | #65 Master Angular: Introduction to Dependency Injection
- Learn Angular 17 in Arabic | #66 Master Angular: Services with Dependency Injection and Providers
- Learn Angular 17 in Arabic | #67 Master Angular: Injector, @Injectable, and ProvideIn {root ,any..}
- Learn Angular 17 in Arabic | #68 Master Angular: Shared Module with Reusable Code
- Learn Angular 17 in Arabic | #69 Master Angular: Just-in-time (JIT) and Ahead-of-Time (AOT) Compiler
- Learn Angular 17 in Arabic | #70 Master Angular: HttpClient Get Method API Integration (Part 01)
- Learn Angular 17 in Arabic | #71 Master Angular: HttpClient POST, PUT, PATCH, DELETE (Part 02)
- Learn Angular 17 in Arabic | #72 Master Angular: Essential Extensions and Notions Docs for Angular
- Learn Angular 17 in Arabic | #73 Master Angular: E-Commerce (1): Install Required Libraries PrimeNG
- Learn Angular 17 in Arabic | #74 Master Angular: E-Commerce (2): API Overview & Layout Routing
- Learn Angular 17 in Arabic | #75 Master Angular: E-Commerce (3): Create Layout Routing (Auth & User)
- Learn Angular 17 in Arabic | #76 Master Angular: E-Commerce (4): Create Navbar Using PrimeNG
- Learn Angular 17 in Arabic | #77 Master Angular: E-Commerce (5): Create Register Form Using PrimeNG
- Learn Angular 17 in Arabic | #78 Master Angular: E-Commerce (6): Add Notification to Register Form
- Learn Angular 17 in Arabic | #79 Master Angular: E-Commerce (7): Integrate Registration Form API
- Learn Angular 17 in Arabic | #80 Master Angular: E-Commerce (8): Add Loading Screen Use NGX Spinner
- Learn Angular 17 in Arabic | #81 Master Angular: E-Commerce (9): Create a Login Form Using PrimeNG
- Learn Angular 17 in Arabic | #82 Master Angular: E-Commerce (10): Creating a Shared Module for Forms
- Learn Angular 17 in Arabic | #83 Master Angular: E-Commerce (11): Add Route Guards | canActivateFn
- Learn Angular 17 in Arabic | #84 Master Angular: E-Commerce (12): Route & State Parameters in Guard
- Learn Angular 17 in Arabic | #85 Master Angular: E-Commerce (13): Navigate, NavigateByUrl & URLTree
- Learn Angular 17 in Arabic | #86 Master Angular: E-Commerce (14): canDeactivate, canMatch, etc..
- Learn Angular 17 in Arabic | #87 Master Angular: E-Commerce (15): Start User Layout
- Learn Angular 17 in Arabic | #88 Master Angular: E-Commerce(16): Create a Blank Navbar Using PrimeNG
- Learn Angular 17 in Arabic | #89 Master Angular: E-Commerce (17): Get Username Using BehaviorSubject
- Learn Angular 17 in Arabic | #90 Master Angular: E-Commerce(18): Create Card & Integrate with Logout
- Learn Angular 17 in Arabic | #91 Master Angular: E-Commerce (19): Improve Card & Make It Reusable P1
- Learn Angular 17 in Arabic | #92 Master Angular: E-Commerce (20): Improve Card & Make It Reusable P2
- Learn Angular 17 in Arabic | #93 Master Angular: E-Commerce (21): Integrate With Product API
- Learn Angular 17 in Arabic | #94 Master Angular: E-Commerce (22): Finalize Card Component UI
- Learn Angular 17 in Arabic | #95 Master Angular: E-Commerce (23): Get Cart Count Using Cart API | P1
- Learn Angular 17 in Arabic | #96 Master Angular: E-Commerce (24): Add To Cart Using Cart API (P2)
- Learn Angular 17 in Arabic | #97 Master Angular: E-Commerce (25): Store Cart Data in Local Storage
- Learn Angular 17 in Arabic | #98 Master Angular: E-Commerce (26): Toaster Notifications with PrimeNG
- Learn Angular 17 in Arabic | #99 Master Angular: E-Commerce (27): Interceptors: Modern vs Legacy