{"id":14,"date":"2026-04-25T16:12:41","date_gmt":"2026-04-25T16:12:41","guid":{"rendered":"http:\/\/localhost:8080\/?program=angular-21"},"modified":"2026-04-26T05:38:22","modified_gmt":"2026-04-26T05:38:22","slug":"angular-21-5-day","status":"publish","type":"program","link":"https:\/\/jegan.my\/?program=angular-21-5-day","title":{"rendered":"Angular 21"},"content":{"rendered":"<h2>Day 1 &#8211; TypeScript and Angular Foundation<\/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>Decision Making and Loops<\/li>\n<li>Functions and Arrow Functions<\/li>\n<li>Generics<\/li>\n<li>Enums<\/li>\n<li>Numbers and Strings<\/li>\n<li>Arrays<\/li>\n<li>Tuples<\/li>\n<li>Union and Intersection Types<\/li>\n<li>Interfaces, Classes and Objects<\/li>\n<li>Type Aliases<\/li>\n<li>Modules (ES Modules)<\/li>\n<li>Decorators<\/li>\n<li>Utility Types<\/li>\n<li>Summary<\/li>\n<li>Lab 1: TypeScript Fundamentals<\/li>\n<li>Build a TypeScript-based inventory model:<\/li>\n<li>Define interfaces and classes<\/li>\n<li>Use generics for reusable utilities<\/li>\n<li>Implement enum and union types<\/li>\n<li>Compile and run using ts-node<\/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>Change Detection Overview<\/li>\n<li>What Is New in Angular 21<\/li>\n<li>Summary<\/li>\n<li>Lab 2: Create Your First Angular App<\/li>\n<li>Install Angular CLI<\/li>\n<li>Create a standalone Angular 21 project<\/li>\n<li>Generate components<\/li>\n<li>Run and explore dev tools<\/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>Traditional Web Application Architecture<\/li>\n<li>SPA Advantages<\/li>\n<li>SPA Challenges<\/li>\n<li>Implementing SPAs Using Angular 21<\/li>\n<li>SPA Using Standalone Components<\/li>\n<li>Component-Based Navigation<\/li>\n<li>Displaying Components Dynamically<\/li>\n<li>Implementing SPA Using Angular Router<\/li>\n<li>Summary<\/li>\n<li>Lab 3: Build a Simple SPA Layout<\/li>\n<li>Create layout components<\/li>\n<li>Add navigation<\/li>\n<li>Dynamically load views<\/li>\n<\/ul>\n<h2>Day 2 &#8211; Components, Binding and Forms<\/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 &#8211; Text, Objects and Arrays<\/li>\n<li>Component Styling<\/li>\n<li>View Encapsulation<\/li>\n<li>Integrating External CSS Frameworks<\/li>\n<li>Creating Header Component<\/li>\n<li>Creating Footer Component<\/li>\n<li>Creating Product Component<\/li>\n<li>Summary<\/li>\n<li>Lab 4: Build a Product Dashboard UI<\/li>\n<li>Create:<\/li>\n<li>Header<\/li>\n<li>Sidebar<\/li>\n<li>Product List<\/li>\n<li>Product Card Component<\/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>Attribute Binding<\/li>\n<li>Event Binding<\/li>\n<li>Event Binding Examples<\/li>\n<li>Template Reference Variables<\/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<li>Lab 5: Parent-Child Communication<\/li>\n<li>Pass product data to child components<\/li>\n<li>Emit events from child to parent<\/li>\n<li>Implement two-way binding<\/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>Dynamic Property Binding<\/li>\n<li>Controlling Element Visibility<\/li>\n<li>Dynamic Image and Hyperlink Binding<\/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>Else and Nested Conditions<\/li>\n<li>Looping Using @for<\/li>\n<li>Tracking Items with track<\/li>\n<li>Accessing Index and Context Variables<\/li>\n<li>Conditional Switching Using @switch<\/li>\n<li>Rendering Templates Dynamically<\/li>\n<li>Performance Benefits of Modern Control Flow<\/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>Accessing Form State<\/li>\n<li>Handling Form Submission<\/li>\n<li>HTML5 Validation<\/li>\n<li>Angular Validation Overview<\/li>\n<li>Built-in Validators<\/li>\n<li>Validation States<\/li>\n<li>Displaying Validation Errors<\/li>\n<li>Disabling Submit for Invalid Forms<\/li>\n<li>Working with Checkboxes<\/li>\n<li>Select (Drop-Down) Fields<\/li>\n<li>Date and Number Inputs<\/li>\n<li>Radio Buttons<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>9. Reactive Forms<\/h3>\n<ul>\n<li>Introduction to Reactive Forms<\/li>\n<li>Registering Reactive Forms Module<\/li>\n<li>Creating FormControl<\/li>\n<li>Registering Controls<\/li>\n<li>Managing Control Values<\/li>\n<li>Creating FormGroup<\/li>\n<li>Connecting Model and View<\/li>\n<li>Nested Form Groups<\/li>\n<li>Updating Form Values<\/li>\n<li>Using FormBuilder<\/li>\n<li>Built-in Validators<\/li>\n<li>Custom Validators<\/li>\n<li>Dynamic Forms Using FormArray<\/li>\n<li>Summary<\/li>\n<li>Lab 6: Advanced Reactive Forms<\/li>\n<li>Create dynamic product form using FormArray<\/li>\n<li>Add custom validator<\/li>\n<li>Show real-time validation errors<\/li>\n<li>Submit and log structured JSON<\/li>\n<\/ul>\n<h2>Day 3 &#8211; Services, Signals and HTTP<\/h2>\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>Service Scopes<\/li>\n<li>Using Services in Components<\/li>\n<li>Shared Services<\/li>\n<li>Optional Dependencies<\/li>\n<li>Host Dependencies<\/li>\n<li>Summary<\/li>\n<li>Lab 7: Shared Product Service<\/li>\n<li>Create centralized state service<\/li>\n<li>Inject into multiple components<\/li>\n<li>Refactor local state into service<\/li>\n<\/ul>\n<h3>11. Signals and Reactive Programming<\/h3>\n<ul>\n<li>Introduction to Angular Signals<\/li>\n<li>Creating Signals<\/li>\n<li>Reading and Updating Signal Values<\/li>\n<li>Computed Signals<\/li>\n<li>Effect Functions<\/li>\n<li>Signal-Based State Management<\/li>\n<li>Signals vs Observables<\/li>\n<li>Using Signals with Components<\/li>\n<li>Signal-based component inputs<\/li>\n<li>Signal performance patterns<\/li>\n<li>Avoiding unnecessary effects<\/li>\n<li>Summary<\/li>\n<li>Lab 8: Signal-Based Cart System<\/li>\n<li>Create cart signal<\/li>\n<li>Compute total price<\/li>\n<li>Auto-update UI using computed signals<\/li>\n<\/ul>\n<h3>12. Signal Forms and Modern Form State<\/h3>\n<ul>\n<li>Introduction to Signal Forms<\/li>\n<li>Why Signal Forms<\/li>\n<li>Signal-based form state<\/li>\n<li>Validation patterns<\/li>\n<li>Comparing Signal Forms with Reactive Forms<\/li>\n<li>When to use Signal Forms<\/li>\n<li>Limitations and adoption considerations<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>13. 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>Subject and BehaviorSubject<\/li>\n<li>Async Pipe<\/li>\n<li>Interoperability Between Signals and Observables<\/li>\n<li>switchMap, mergeMap, concatMap<\/li>\n<li>Error handling with catchError<\/li>\n<li>takeUntil and memory management<\/li>\n<li>Combining streams<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>14. 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>HTTP Headers and Options<\/li>\n<li>POST, PUT and DELETE Requests<\/li>\n<li>Handling HTTP Responses<\/li>\n<li>Error Handling Strategies<\/li>\n<li>Observables in HTTP<\/li>\n<li>Consuming APIs in Components<\/li>\n<li>HTTP Interceptors<\/li>\n<li>Authentication headers<\/li>\n<li>Global error handling<\/li>\n<li>Loading indicators<\/li>\n<li>Environment configuration<\/li>\n<li>Summary<\/li>\n<li>Lab 9: REST API Integration<\/li>\n<li>Connect to mock API<\/li>\n<li>Implement CRUD operations<\/li>\n<li>Add interceptor for logging<\/li>\n<li>Handle loading and error states<\/li>\n<\/ul>\n<h3>15. Modern Data Fetching with Resource API and httpResource<\/h3>\n<ul>\n<li>Introduction to Resource API<\/li>\n<li>Understanding httpResource<\/li>\n<li>Loading, value and error states<\/li>\n<li>Signal-friendly data fetching patterns<\/li>\n<li>Comparing httpResource with HttpClient and RxJS<\/li>\n<li>When to use each approach<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h2>Day 4 &#8211; Routing, Architecture, and Advanced Angular<\/h2>\n<h3>16. Pipes and Data Formatting<\/h3>\n<ul>\n<li>What Are Pipes<\/li>\n<li>Built-in Pipes<\/li>\n<li>Using Pipes in Templates<\/li>\n<li>Chaining Pipes<\/li>\n<li>Using Pipes in TypeScript<\/li>\n<li>Decimal Pipe<\/li>\n<li>Currency Pipe<\/li>\n<li>Date Pipe<\/li>\n<li>Creating Custom Pipes<\/li>\n<li>Pure and Impure Pipes<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>17. Accessibility and Internationalization<\/h3>\n<ul>\n<li>Accessibility fundamentals in Angular<\/li>\n<li>Semantic HTML and accessible component design<\/li>\n<li>Keyboard navigation and focus management<\/li>\n<li>ARIA roles and attributes<\/li>\n<li>Accessible forms and validation feedback<\/li>\n<li>Introduction to Angular i18n<\/li>\n<li>Locale-aware formatting<\/li>\n<li>Dates, numbers, and currency by locale<\/li>\n<li>Structuring multilingual Angular applications<\/li>\n<li>Summary<\/li>\n<\/ul>\n<h3>18. Angular Routing and Navigation<\/h3>\n<ul>\n<li>Routing Overview<\/li>\n<li>Angular Router Architecture<\/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>Query Parameters<\/li>\n<li>Retrieving Route Data<\/li>\n<li>Lazy Loading Routes<\/li>\n<li>Handling Invalid Routes<\/li>\n<li>Route Guards (CanActivate, CanDeactivate)<\/li>\n<li>Resolver<\/li>\n<li>Preloading strategies<\/li>\n<li>Standalone route configuration<\/li>\n<li>Nested routes<\/li>\n<li>Summary<\/li>\n<li>Lab 10: Secure Admin Route<\/li>\n<li>Implement login mock<\/li>\n<li>Protect route using guard<\/li>\n<li>Load admin module lazily<\/li>\n<\/ul>\n<h3>19. Component Lifecycle and Change Detection<\/h3>\n<ul>\n<li>Lifecycle Hooks Overview<\/li>\n<li>ngOnInit, ngOnDestroy<\/li>\n<li>afterRender hooks (modern APIs)<\/li>\n<li>OnPush Change Detection<\/li>\n<li>Manual Change Detection<\/li>\n<li>Performance implications<\/li>\n<\/ul>\n<h3>20. State Management Patterns<\/h3>\n<ul>\n<li>Local component state<\/li>\n<li>Service-based state<\/li>\n<li>Signal-based global state<\/li>\n<li>When to use RxJS vs Signals<\/li>\n<li>Introduction to NgRx (Conceptual Overview)<\/li>\n<\/ul>\n<h3>21. Content Projection and Dynamic Components<\/h3>\n<ul>\n<li>ng-content<\/li>\n<li>Multiple slots<\/li>\n<li>ViewContainerRef<\/li>\n<li>Dynamic component loading<\/li>\n<li>Portals concept<\/li>\n<\/ul>\n<h2>Day 5 &#8211; Testing, Performance, Security, and Deployment<\/h2>\n<h3>22. Testing in Angular<\/h3>\n<ul>\n<li>Testing Strategy Overview<\/li>\n<li>Unit Testing Components<\/li>\n<li>Testing Services<\/li>\n<li>TestBed<\/li>\n<li>Mocking Dependencies<\/li>\n<li>Testing Reactive Forms<\/li>\n<li>Testing HTTP Calls<\/li>\n<li>Introduction to E2E Testing<\/li>\n<li>Lab 12: Write Unit Tests<\/li>\n<li>Test product service<\/li>\n<li>Test form validation<\/li>\n<li>Mock HTTP calls<\/li>\n<\/ul>\n<h3>23. Performance Optimization<\/h3>\n<ul>\n<li>Lazy Loading Best Practices<\/li>\n<li>Code Splitting<\/li>\n<li>OnPush Strategy<\/li>\n<li>trackBy Optimization<\/li>\n<li>Signals Performance Tuning<\/li>\n<li>Avoiding Memory Leaks<\/li>\n<li>Bundle Analysis<\/li>\n<\/ul>\n<h3>24. Security Best Practices<\/h3>\n<ul>\n<li>XSS Prevention<\/li>\n<li>Angular Sanitization<\/li>\n<li>Route Protection<\/li>\n<li>Token Storage Strategies<\/li>\n<li>CORS Overview<\/li>\n<li>Secure HTTP Communication<\/li>\n<\/ul>\n<h3>25. Environment Configuration and Build<\/h3>\n<ul>\n<li>Angular Environments<\/li>\n<li>Production Build<\/li>\n<li>AOT Compilation<\/li>\n<li>Build Optimization<\/li>\n<li>Source Maps<\/li>\n<li>Debugging Production Issues<\/li>\n<\/ul>\n<h3>26. Final Lab (Capstone Project)<\/h3>\n<ul>\n<li>Build a complete Product Management System<\/li>\n<li>Features:<\/li>\n<li>Authentication mock<\/li>\n<li>Protected admin routes<\/li>\n<li>Product CRUD with API<\/li>\n<li>Reactive form validation<\/li>\n<li>Signal-based cart<\/li>\n<li>Animations<\/li>\n<li>Route guards<\/li>\n<li>HTTP interceptor<\/li>\n<li>Unit tests<\/li>\n<li>Production build<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This 5-day accelerated Angular 21 program is designed for developers who need broad and practical exposure to modern Angular development within a short timeframe. The course covers TypeScript foundations, standalone architecture, components, forms, services, signals, RxJS, API integration, routing, testing, performance, security, and deployment, while also introducing current Angular capabilities such as Signal Forms, Resource API, accessibility, and internationalization. With selected hands-on exercises and guided demonstrations throughout the program, participants gain practical working knowledge of Angular 21 and a clear understanding of how its major features fit together in real-world application development.<\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-14","program","type-program","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jegan.my\/index.php?rest_route=\/wp\/v2\/program\/14","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=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}