{"id":21,"date":"2026-04-26T00:32:26","date_gmt":"2026-04-26T00:32:26","guid":{"rendered":"http:\/\/localhost:8080\/?program=angular-21-3-day"},"modified":"2026-04-26T11:36:52","modified_gmt":"2026-04-26T11:36:52","slug":"angular-21-3-day","status":"publish","type":"program","link":"https:\/\/jegan.my\/?program=angular-21-3-day","title":{"rendered":"Angular 21 &#8211; 3 Day"},"content":{"rendered":"<h2>Day 1<\/h2>\n<h3>1. Introduction to TypeScript<\/h3>\n<ul>\n<li>Overview<\/li>\n<li>Environment Setup<\/li>\n<li>Basic Syntax<\/li>\n<li>Types, Variables and Operators<\/li>\n<li>Functions and Arrow Functions<\/li>\n<li>Interfaces, Classes and Objects<\/li>\n<li>Modules (ES Modules)<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>2. Introduction to Angular<\/h3>\n<ul>\n<li>Why Angular 21<\/li>\n<li>Angular 21 Key Features<\/li>\n<li>Angular CLI Overview<\/li>\n<li>Installing and Using Angular 21<\/li>\n<li>Creating the First Angular Project<\/li>\n<li>Project Structure Overview<\/li>\n<li>Standalone Components Architecture<\/li>\n<li>Dependency Injection Overview<\/li>\n<li>What Is New in Angular 21<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>3. Introduction to Single Page Applications<\/h3>\n<ul>\n<li>What Is a Single Page Application (SPA)<\/li>\n<li>SPA Workflow<\/li>\n<li>SPA Advantages<\/li>\n<li>SPA Challenges<\/li>\n<li>Implementing SPAs Using Angular 21<\/li>\n<li>Implementing SPA Using Angular Router<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h2>Day 2<\/h2>\n<h3>4. Building with Components<\/h3>\n<ul>\n<li>Introduction to Angular Components<\/li>\n<li>Standalone Components<\/li>\n<li>Component Metadata and Decorators<\/li>\n<li>Templates and Inline Templates<\/li>\n<li>Interpolation<\/li>\n<li>Component Styling<\/li>\n<li>View Encapsulation<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>5. Data Binding and Event Handling<\/h3>\n<ul>\n<li>Angular Binding Syntax<\/li>\n<li>One-Way Data Binding<\/li>\n<li>Property Binding<\/li>\n<li>Event Binding<\/li>\n<li>Two-Way Binding Using ngModel<\/li>\n<li>Input and Output Properties<\/li>\n<li>Parent-Child Component Communication<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>6. Attribute Directives<\/h3>\n<ul>\n<li>What Are Directives<\/li>\n<li>Directive Types<\/li>\n<li>Built-in Attribute Directives<\/li>\n<li>Dynamic Class Binding<\/li>\n<li>Dynamic Style Binding<\/li>\n<li>Conditional Styling<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>7. Modern Control Flow and Structural Rendering<\/h3>\n<ul>\n<li>Introduction to Angular Control Flow<\/li>\n<li>Conditional Rendering Using @if<\/li>\n<li>Looping Using @for<\/li>\n<li>Conditional Switching Using @switch<\/li>\n<li>Rendering Templates Dynamically<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>8. Template Driven Forms<\/h3>\n<ul>\n<li>Overview of Angular Forms<\/li>\n<li>Creating a Basic Angular Form<\/li>\n<li>Binding Input Fields<\/li>\n<li>Handling Form Submission<\/li>\n<li>Built-in Validators<\/li>\n<li>Displaying Validation Errors<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>9. Reactive Forms<\/h3>\n<ul>\n<li>Introduction to Reactive Forms<\/li>\n<li>Creating FormControl<\/li>\n<li>Creating FormGroup<\/li>\n<li>Using FormBuilder<\/li>\n<li>Built-in Validators<\/li>\n<li>Custom Validators<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>10. Services and Dependency Injection<\/h3>\n<ul>\n<li>What Is a Service<\/li>\n<li>Creating Services<\/li>\n<li>Dependency Injection Fundamentals<\/li>\n<li>Injecting Services<\/li>\n<li>Shared Services<\/li>\n<li>Using Services in Components<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h2>Day 3<\/h2>\n<h3>11. Signals and Reactive Programming<\/h3>\n<ul>\n<li>Introduction to Angular Signals<\/li>\n<li>Creating Signals<\/li>\n<li>Computed Signals<\/li>\n<li>Signal-Based State Management<\/li>\n<li>Signals vs Observables<\/li>\n<li>Using Signals with Components<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>12. RxJS and Observables<\/h3>\n<ul>\n<li>Introduction to RxJS<\/li>\n<li>Observables Overview<\/li>\n<li>Creating Observables<\/li>\n<li>Subscribing and Unsubscribing<\/li>\n<li>Common RxJS Operators<\/li>\n<li>Async Pipe<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>13. HTTP Client and API Integration<\/h3>\n<ul>\n<li>Angular HTTP Client Overview<\/li>\n<li>Setting Up HTTP Client<\/li>\n<li>Creating API Services<\/li>\n<li>Making HTTP GET Requests<\/li>\n<li>POST, PUT and DELETE Requests<\/li>\n<li>Handling HTTP Responses<\/li>\n<li>Error Handling Strategies<\/li>\n<li>Consuming APIs in Components<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>14. Pipes and Data Formatting<\/h3>\n<ul>\n<li>What Are Pipes<\/li>\n<li>Built-in Pipes<\/li>\n<li>Decimal Pipe<\/li>\n<li>Currency Pipe<\/li>\n<li>Date Pipe<\/li>\n<li>Creating Custom Pipes<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>15. Angular Routing and Navigation<\/h3>\n<ul>\n<li>Routing Overview<\/li>\n<li>Route Configuration Using Standalone APIs<\/li>\n<li>Router Outlet<\/li>\n<li>Navigation Links<\/li>\n<li>Programmatic Navigation<\/li>\n<li>Route Parameters<\/li>\n<li>Lazy Loading Routes<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>16. Angular Application Architecture<\/h3>\n<ul>\n<li>Feature-based folder structure<\/li>\n<li>Service-based state management<\/li>\n<li>Separation of concerns<\/li>\n<li>Reusable component design<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>17. Final Project<\/h3>\n<ul>\n<li>Build a compact Angular application<\/li>\n<li>Component-based UI structure<\/li>\n<li>Form handling and validation<\/li>\n<li>Service integration with API calls<\/li>\n<li>Routing and navigation flow<\/li>\n<li>Signals or RxJS for state updates<\/li>\n<li>Summary and wrap-up<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This 3-day accelerated Angular 21 program is designed for developers who want a focused and practical introduction to modern Angular development. The course covers TypeScript foundations, standalone architecture, components, forms, services, signals, RxJS, API integration, routing, and core application design patterns, while incorporating selected hands-on exercises and guided demonstrations throughout the delivery. Participants will build solid working knowledge of Angular 21 and gain a clear understanding of how its essential features are applied in real-world frontend application development.<\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-21","program","type-program","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jegan.my\/index.php?rest_route=\/wp\/v2\/program\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jegan.my\/index.php?rest_route=\/wp\/v2\/program"}],"about":[{"href":"https:\/\/jegan.my\/index.php?rest_route=\/wp\/v2\/types\/program"}],"wp:attachment":[{"href":"https:\/\/jegan.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}