Advanced Angular DevelopmentNGADVFLFast LaneFL-NGADV14<ul>
<li>Standalone Components - Concepts & Migration: Understand the differences between standalone components and modules, delve into Angular's bootstrapping process, and learn how to migrate an existing project to use standalone components.</li><li>Components & Forms Deep Dive: Explore advanced component and form techniques, including control flow syntax, deferred loading, content projection, cascading reactive forms, and creating custom controls with enhanced validation and error handling.</li><li>Mastering Reactive Programming using RxJS: Master RxJS concepts like observables, operators, and error handling strategies, along with practical debugging and testing techniques for implementing custom observable operators.</li><li>Mastering Reactivity using Signals: Learn about signals and their interoperability with observables, data retrieval methods, and effective communication between components using advanced signal techniques and the Event Bus pattern.</li><li>State Management using NgRx Classic & NgRx SignalStore: Discover state management patterns, implement both NgRx Classic and SignalStore, manage side effects, and create custom store features while tracking state changes efficiently.</li><li>Advanced Routing and App Initialization: Gain deep insights into dependency injection, app initialization, global error handling, and advanced routing techniques including view transitions, auxiliary routes, and router animations.</li><li>Advanced Testing with Jasmine, Jest, Cypress and NgRx: Comprehensively test Angular applications using tools like Jasmine, Jest, and Cypress, covering unit tests, complex form testing, state management testing, and end-to-end testing.</li><li>Reusability with Libraries, Nx & Angular Elements: Create reusable Angular artifacts using libraries and Nx workspaces, and develop reusable components like an AI chat using Angular Elements.</li><li>Real Time Micro-Frontends & Progressive Web Apps: Understand micro-frontends and progressive web apps, focusing on real-time connected micro-frontends, HTML5 APIs, service workers, and PWA installation and updates.</li><li>Server Side Rendering (SSR): Get introduced to SSR, including build-time pre-rendering, optimizing components for server-side, hybrid rendering, and incremental hydration for improved performance.</li><li>Optimizing Applications: Use tools like Chrome Dev Tools and Lighthouse to optimize application performance, analyze bundles, improve change detection, provide localization and ensure accessibility and configuration management best practices.</li></ul><h5>Standalone Components: Concepts & Migration</h5><ul>
<li>Standalone Components vs Modules</li><li>Understanding the Angular Bootstrapping Process</li><li>Registering Providers in app.config.ts</li><li>Routing and app.routes.ts</li><li>Migrate an existing Project to Standalone Components</li></ul><h5>Components & Forms Deep Dive</h5><ul>
<li>Using & Migrating to Control Flow Syntax</li><li>Deferred Loading & Selective Activation using @deferred</li><li>Standalone Directives & Directives Composition Api</li><li>Reusability with Content Projection</li><li>Reactive Forms (FormGroup, Form Builder, FormControl, FormArray)</li><li>Typed Forms Nullability, NonNullableFormBuilder, GetRawValue</li><li>Partial Values, Optional Controls, Dynamic Groups and FormRecord</li><li>Classic Form Events vs Unified Form Events</li><li>Cascading Form Controls</li><li>Implementing Custom Controls using ControlValueAccessor</li><li>Typed Forms Validation & Custom Validators</li><li>Handling FormErrors & ErrorStateMatcher</li></ul><h5>Mastering Reactive Programming using RxJS</h5><ul>
<li>Introduction to RxJS</li><li>Observables, Observers & Use Cases</li><li>Unsubscribing DestroyRef & takeUntilDestroyed</li><li>Imperative vs Declarative Reactivity</li><li>Data- vs Action-Streams</li><li>Mouse & DOM Events as Observables</li><li>Subject Types & Stateful Services</li><li>Base Operators: Mapping, Filtering, Merging,</li><li>Understanding Marble Diagrams & Debugging Observables</li><li>Combination & Transformation Operators</li><li>Retry & Error Handling Strategies</li><li>Implementing & Testing Custom Observable Operators</li></ul><h5>Mastering Reactivity using Signals</h5><ul>
<li>Introduction to Signals (WritableSignal, Computed, Effects)</li><li>Signals vs Observables</li><li>Signals & Observables Interoperability</li><li>Deep Signals & Linked Signals</li><li>Data Retrieval using resource() and rxResource()</li><li>Nesting Components using Signals, input, output & model</li><li>View Queries: viewChild, -Children, contentChild, -Children</li><li>Creating View Models using Deep Signals</li><li>Communication between Components using Event Bus Pattern</li><li>ngAfterSignalUpdate Lifecycle Hook</li></ul><h5>State Management using NgRx Classic & NgRx SignalStore</h5><ul>
<li>Overview State Management Patterns</li><li>NgRx Classic vs Signal Store</li><li>Introduction to the Classic NgRx & Redux Pattern</li><li>Implementing NgRx Store, Reducers & Selectors using createFeature</li><li>Actions & createActionGroup</li><li>Effects, Facades, @ngrx/entity & @ngrx/data</li><li>Creating a Signals Store using @ngrx/signals</li><li>NgRx and Signals Interoperability</li><li>Side Effects using rxMethod</li><li>Signals Store, Entity & Custom Data Services</li><li>Implementing and using Custom Store Features</li><li>Tracking State changes</li></ul><h5>Advanced Routing and App Initialization</h5><ul>
<li>Dependency Injection in Depth: Resolution modifiers and Dependency providers</li><li>Using Constructor vs inject for DI</li><li>App initialization & Interceptors</li><li>Global Error Handling & Http-Error Interceptor with Retry-Patterns</li><li>Using Preloading Strategies & Functional Resolvers</li><li>Functional Route Guards</li><li>Route Redirect Functions</li><li>Binding Router-Params to Component Inputs & routerOutletData</li><li>View Transition Api</li><li>Auxiliary Routes: Common use cases</li><li>Router Animations & Anchor Scrolling</li></ul><h5>Advanced Testing with Jasmine, Jest, Cypress and NgRx</h5><ul>
<li>Introduction Angular Testing Tools (Jasmine, Karma, Jest & Cypress)</li><li>Testing Classes, Pipes, Directives</li><li>Testing Services using HttpClientTestingModule & HttpTestingController</li><li>Testing Component Interaction (Read, Write, Emit, Inputs)</li><li>Complex Forms Testing & Deferrable Views</li><li>Testing Observables & Signals</li><li>Material Testing using Component Harnesses</li><li>Async Component Testing (done, fakeAsync, waitForAsync)</li><li>Marble-testing RxJS</li><li>Testing NgRx Classic: Mock Store, Mock Selectors, Reducers, Effects, Facades</li><li>Testing Signal Store & Custom Features</li><li>Using Jest for Unit Testing (Setup, Changes in spec, Snapshot Tests)</li><li>Introduction to End-2-End Testing using Cypress</li></ul><h5>Reusability with Libraries, Nx & Angular Elements</h5><ul>
<li>Angular Building Blocks: Workspace, Apps, Libraries</li><li>Reusable Artifacts using Angular Libraries</li><li>Introduction to Nx Workspaces</li><li>Creating a reusable AI Chat Component using Angular Elements</li></ul><h5>Real Time Micro-Frontends & Progressive Web Apps</h5><ul>
<li>Introduction to Micro-Frontends</li><li>Real Time connected Micro-Frontend processing Cloud Events</li><li>Introduction to Progressive Web Apps</li><li>HTML 5 APIs</li><li>Understanding and Configuring Service Workers & Manifests</li><li>Installing & Updating Progressive Web Apps</li></ul><h5>Server Side Rendering (SSR)</h5><ul>
<li>Introduction to Server Side Rendering (SSR)</li><li>Build-time pre-rerendering</li><li>Optimize Components using Platform Specific Code</li><li>Hybrid Rendering</li><li>Introduction to Hydration & Incremental Hydration</li></ul><h5>Optimizing Applications</h5><ul>
<li>Using Chrome Dev Tools & Lighthouse for Performance Optimization</li><li>Understanding & Using Page Traces & Web Vitals</li><li>Analyzing and Optimizing Bundles & Components</li><li>Build Optimizations using Angular CLI</li><li>Optimizing Images using NgOptimizedImage</li><li>Data-Loading Strategies, Virtual- & Infinite Scrolling,</li><li>Understanding, Profiling & Optimizing Angular Change Detection</li><li>Zoneless Change Detection</li><li>Using @angular/localize</li><li>Accessibility A11y: Best Practices & Linting</li><li>Using Linting and Autoformat with Prettier</li><li>Configuration Management & Containers</li></ul>- Standalone Components - Concepts & Migration: Understand the differences between standalone components and modules, delve into Angular's bootstrapping process, and learn how to migrate an existing project to use standalone components.
- Components & Forms Deep Dive: Explore advanced component and form techniques, including control flow syntax, deferred loading, content projection, cascading reactive forms, and creating custom controls with enhanced validation and error handling.
- Mastering Reactive Programming using RxJS: Master RxJS concepts like observables, operators, and error handling strategies, along with practical debugging and testing techniques for implementing custom observable operators.
- Mastering Reactivity using Signals: Learn about signals and their interoperability with observables, data retrieval methods, and effective communication between components using advanced signal techniques and the Event Bus pattern.
- State Management using NgRx Classic & NgRx SignalStore: Discover state management patterns, implement both NgRx Classic and SignalStore, manage side effects, and create custom store features while tracking state changes efficiently.
- Advanced Routing and App Initialization: Gain deep insights into dependency injection, app initialization, global error handling, and advanced routing techniques including view transitions, auxiliary routes, and router animations.
- Advanced Testing with Jasmine, Jest, Cypress and NgRx: Comprehensively test Angular applications using tools like Jasmine, Jest, and Cypress, covering unit tests, complex form testing, state management testing, and end-to-end testing.
- Reusability with Libraries, Nx & Angular Elements: Create reusable Angular artifacts using libraries and Nx workspaces, and develop reusable components like an AI chat using Angular Elements.
- Real Time Micro-Frontends & Progressive Web Apps: Understand micro-frontends and progressive web apps, focusing on real-time connected micro-frontends, HTML5 APIs, service workers, and PWA installation and updates.
- Server Side Rendering (SSR): Get introduced to SSR, including build-time pre-rendering, optimizing components for server-side, hybrid rendering, and incremental hydration for improved performance.
- Optimizing Applications: Use tools like Chrome Dev Tools and Lighthouse to optimize application performance, analyze bundles, improve change detection, provide localization and ensure accessibility and configuration management best practices.Standalone Components: Concepts & Migration
- Standalone Components vs Modules
- Understanding the Angular Bootstrapping Process
- Registering Providers in app.config.ts
- Routing and app.routes.ts
- Migrate an existing Project to Standalone Components
Components & Forms Deep Dive
- Using & Migrating to Control Flow Syntax
- Deferred Loading & Selective Activation using @deferred
- Standalone Directives & Directives Composition Api
- Reusability with Content Projection
- Reactive Forms (FormGroup, Form Builder, FormControl, FormArray)
- Typed Forms Nullability, NonNullableFormBuilder, GetRawValue
- Partial Values, Optional Controls, Dynamic Groups and FormRecord
- Classic Form Events vs Unified Form Events
- Cascading Form Controls
- Implementing Custom Controls using ControlValueAccessor
- Typed Forms Validation & Custom Validators
- Handling FormErrors & ErrorStateMatcher
Mastering Reactive Programming using RxJS
- Introduction to RxJS
- Observables, Observers & Use Cases
- Unsubscribing DestroyRef & takeUntilDestroyed
- Imperative vs Declarative Reactivity
- Data- vs Action-Streams
- Mouse & DOM Events as Observables
- Subject Types & Stateful Services
- Base Operators: Mapping, Filtering, Merging,
- Understanding Marble Diagrams & Debugging Observables
- Combination & Transformation Operators
- Retry & Error Handling Strategies
- Implementing & Testing Custom Observable Operators
Mastering Reactivity using Signals
- Introduction to Signals (WritableSignal, Computed, Effects)
- Signals vs Observables
- Signals & Observables Interoperability
- Deep Signals & Linked Signals
- Data Retrieval using resource() and rxResource()
- Nesting Components using Signals, input, output & model
- View Queries: viewChild, -Children, contentChild, -Children
- Creating View Models using Deep Signals
- Communication between Components using Event Bus Pattern
- ngAfterSignalUpdate Lifecycle Hook
State Management using NgRx Classic & NgRx SignalStore
- Overview State Management Patterns
- NgRx Classic vs Signal Store
- Introduction to the Classic NgRx & Redux Pattern
- Implementing NgRx Store, Reducers & Selectors using createFeature
- Actions & createActionGroup
- Effects, Facades, @ngrx/entity & @ngrx/data
- Creating a Signals Store using @ngrx/signals
- NgRx and Signals Interoperability
- Side Effects using rxMethod
- Signals Store, Entity & Custom Data Services
- Implementing and using Custom Store Features
- Tracking State changes
Advanced Routing and App Initialization
- Dependency Injection in Depth: Resolution modifiers and Dependency providers
- Using Constructor vs inject for DI
- App initialization & Interceptors
- Global Error Handling & Http-Error Interceptor with Retry-Patterns
- Using Preloading Strategies & Functional Resolvers
- Functional Route Guards
- Route Redirect Functions
- Binding Router-Params to Component Inputs & routerOutletData
- View Transition Api
- Auxiliary Routes: Common use cases
- Router Animations & Anchor Scrolling
Advanced Testing with Jasmine, Jest, Cypress and NgRx
- Introduction Angular Testing Tools (Jasmine, Karma, Jest & Cypress)
- Testing Classes, Pipes, Directives
- Testing Services using HttpClientTestingModule & HttpTestingController
- Testing Component Interaction (Read, Write, Emit, Inputs)
- Complex Forms Testing & Deferrable Views
- Testing Observables & Signals
- Material Testing using Component Harnesses
- Async Component Testing (done, fakeAsync, waitForAsync)
- Marble-testing RxJS
- Testing NgRx Classic: Mock Store, Mock Selectors, Reducers, Effects, Facades
- Testing Signal Store & Custom Features
- Using Jest for Unit Testing (Setup, Changes in spec, Snapshot Tests)
- Introduction to End-2-End Testing using Cypress
Reusability with Libraries, Nx & Angular Elements
- Angular Building Blocks: Workspace, Apps, Libraries
- Reusable Artifacts using Angular Libraries
- Introduction to Nx Workspaces
- Creating a reusable AI Chat Component using Angular Elements
Real Time Micro-Frontends & Progressive Web Apps
- Introduction to Micro-Frontends
- Real Time connected Micro-Frontend processing Cloud Events
- Introduction to Progressive Web Apps
- HTML 5 APIs
- Understanding and Configuring Service Workers & Manifests
- Installing & Updating Progressive Web Apps
Server Side Rendering (SSR)
- Introduction to Server Side Rendering (SSR)
- Build-time pre-rerendering
- Optimize Components using Platform Specific Code
- Hybrid Rendering
- Introduction to Hydration & Incremental Hydration
Optimizing Applications
- Using Chrome Dev Tools & Lighthouse for Performance Optimization
- Understanding & Using Page Traces & Web Vitals
- Analyzing and Optimizing Bundles & Components
- Build Optimizations using Angular CLI
- Optimizing Images using NgOptimizedImage
- Data-Loading Strategies, Virtual- & Infinite Scrolling,
- Understanding, Profiling & Optimizing Angular Change Detection
- Zoneless Change Detection
- Using @angular/localize
- Accessibility A11y: Best Practices & Linting
- Using Linting and Autoformat with Prettier
- Configuration Management & Containers4 days11070.002690.002690.002690.002690.002690.00