{"course":{"productid":23412,"modality":1,"active":true,"language":"fr","title":"Advanced Angular Development","productcode":"NGADV","vendorcode":"FL","vendorname":"Fast Lane","fullproductcode":"FL-NGADV","courseware":{"has_ekit":false,"has_printkit":true,"language":""},"url":"https:\/\/portal.flane.ch\/course\/training-ngadv","contents":"<ul>\n<li>Standalone Components - Concepts &amp; Migration: Understand the differences between standalone components and modules, delve into Angular&#039;s bootstrapping process, and learn how to migrate an existing project to use standalone components.<\/li><li>Components &amp; 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 &amp; 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 &amp; 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 &amp; 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>","outline":"<h5>Standalone Components: Concepts &amp; Migration<\/h5><ul>\n<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 &amp; Forms Deep Dive<\/h5><ul>\n<li>Using &amp; Migrating to Control Flow Syntax<\/li><li>Deferred Loading &amp; Selective Activation using @deferred<\/li><li>Standalone Directives &amp; 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 &amp; Custom Validators<\/li><li>Handling FormErrors &amp; ErrorStateMatcher<\/li><\/ul><h5>Mastering Reactive Programming using RxJS<\/h5><ul>\n<li>Introduction to RxJS<\/li><li>Observables, Observers &amp; Use Cases<\/li><li>Unsubscribing DestroyRef &amp; takeUntilDestroyed<\/li><li>Imperative vs Declarative Reactivity<\/li><li>Data- vs Action-Streams<\/li><li>Mouse &amp; DOM Events as Observables<\/li><li>Subject Types &amp; Stateful Services<\/li><li>Base Operators: Mapping, Filtering, Merging,<\/li><li>Understanding Marble Diagrams &amp; Debugging Observables<\/li><li>Combination &amp; Transformation Operators<\/li><li>Retry &amp; Error Handling Strategies<\/li><li>Implementing &amp; Testing Custom Observable Operators<\/li><\/ul><h5>Mastering Reactivity using Signals<\/h5><ul>\n<li>Introduction to Signals (WritableSignal, Computed, Effects)<\/li><li>Signals vs Observables<\/li><li>Signals &amp; Observables Interoperability<\/li><li>Deep Signals &amp; Linked Signals<\/li><li>Data Retrieval using resource() and rxResource()<\/li><li>Nesting Components using Signals, input, output &amp; 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 &amp; NgRx SignalStore<\/h5><ul>\n<li>Overview State Management Patterns<\/li><li>NgRx Classic vs Signal Store<\/li><li>Introduction to the Classic NgRx &amp; Redux Pattern<\/li><li>Implementing NgRx Store, Reducers &amp; Selectors using createFeature<\/li><li>Actions &amp; createActionGroup<\/li><li>Effects, Facades, @ngrx\/entity &amp; @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 &amp; 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>\n<li>Dependency Injection in Depth: Resolution modifiers and Dependency providers<\/li><li>Using Constructor vs inject for DI<\/li><li>App initialization &amp; Interceptors<\/li><li>Global Error Handling &amp; Http-Error Interceptor with Retry-Patterns<\/li><li>Using Preloading Strategies &amp; Functional Resolvers<\/li><li>Functional Route Guards<\/li><li>Route Redirect Functions<\/li><li>Binding Router-Params to Component Inputs &amp; routerOutletData<\/li><li>View Transition Api<\/li><li>Auxiliary Routes: Common use cases<\/li><li>Router Animations &amp; Anchor Scrolling<\/li><\/ul><h5>Advanced Testing with Jasmine, Jest, Cypress and NgRx<\/h5><ul>\n<li>Introduction Angular Testing Tools (Jasmine, Karma, Jest &amp; Cypress)<\/li><li>Testing Classes, Pipes, Directives<\/li><li>Testing Services using HttpClientTestingModule &amp; HttpTestingController<\/li><li>Testing Component Interaction (Read, Write, Emit, Inputs)<\/li><li>Complex Forms Testing &amp; Deferrable Views<\/li><li>Testing Observables &amp; 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 &amp; 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 &amp; Angular Elements<\/h5><ul>\n<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 &amp; Progressive Web Apps<\/h5><ul>\n<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 &amp; Manifests<\/li><li>Installing &amp; Updating Progressive Web Apps<\/li><\/ul><h5>Server Side Rendering (SSR)<\/h5><ul>\n<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 &amp; Incremental Hydration<\/li><\/ul><h5>Optimizing Applications<\/h5><ul>\n<li>Using Chrome Dev Tools &amp; Lighthouse for Performance Optimization<\/li><li>Understanding &amp; Using Page Traces &amp; Web Vitals<\/li><li>Analyzing and Optimizing Bundles &amp; Components<\/li><li>Build Optimizations using Angular CLI<\/li><li>Optimizing Images using NgOptimizedImage<\/li><li>Data-Loading Strategies, Virtual- &amp; Infinite Scrolling,<\/li><li>Understanding, Profiling &amp; Optimizing Angular Change Detection<\/li><li>Zoneless Change Detection<\/li><li>Using @angular\/localize<\/li><li>Accessibility A11y: Best Practices &amp; Linting<\/li><li>Using Linting and Autoformat with Prettier<\/li><li>Configuration Management &amp; Containers<\/li><\/ul>","summary":"<p>This is a workshop for experienced Angular developers who want to deepen their knowledge and skills in Angular development. It consists of 10 modules each covering different advanced topics in Angular development. The workshop is designed to be hands-on and interactive, with a mix of lectures, demos, and exercises. It allows participants to deepen their Angular skills for Classic Angular Development but also teaches the updates introduced by the Angular Renaissance Initiative like using Standalone Components, functional Implementations, Signals, and NgRx SignalStore.<\/p>","contents_plain":"- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.\n- 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.","outline_plain":"Standalone Components: Concepts & Migration\n\n\n- Standalone Components vs Modules\n- Understanding the Angular Bootstrapping Process\n- Registering Providers in app.config.ts\n- Routing and app.routes.ts\n- Migrate an existing Project to Standalone Components\nComponents & Forms Deep Dive\n\n\n- Using & Migrating to Control Flow Syntax\n- Deferred Loading & Selective Activation using @deferred\n- Standalone Directives & Directives Composition Api\n- Reusability with Content Projection\n- Reactive Forms (FormGroup, Form Builder, FormControl, FormArray)\n- Typed Forms Nullability, NonNullableFormBuilder, GetRawValue\n- Partial Values, Optional Controls, Dynamic Groups and FormRecord\n- Classic Form Events vs Unified Form Events\n- Cascading Form Controls\n- Implementing Custom Controls using ControlValueAccessor\n- Typed Forms Validation & Custom Validators\n- Handling FormErrors & ErrorStateMatcher\nMastering Reactive Programming using RxJS\n\n\n- Introduction to RxJS\n- Observables, Observers & Use Cases\n- Unsubscribing DestroyRef & takeUntilDestroyed\n- Imperative vs Declarative Reactivity\n- Data- vs Action-Streams\n- Mouse & DOM Events as Observables\n- Subject Types & Stateful Services\n- Base Operators: Mapping, Filtering, Merging,\n- Understanding Marble Diagrams & Debugging Observables\n- Combination & Transformation Operators\n- Retry & Error Handling Strategies\n- Implementing & Testing Custom Observable Operators\nMastering Reactivity using Signals\n\n\n- Introduction to Signals (WritableSignal, Computed, Effects)\n- Signals vs Observables\n- Signals & Observables Interoperability\n- Deep Signals & Linked Signals\n- Data Retrieval using resource() and rxResource()\n- Nesting Components using Signals, input, output & model\n- View Queries: viewChild, -Children, contentChild, -Children\n- Creating View Models using Deep Signals\n- Communication between Components using Event Bus Pattern\n- ngAfterSignalUpdate Lifecycle Hook\nState Management using NgRx Classic & NgRx SignalStore\n\n\n- Overview State Management Patterns\n- NgRx Classic vs Signal Store\n- Introduction to the Classic NgRx & Redux Pattern\n- Implementing NgRx Store, Reducers & Selectors using createFeature\n- Actions & createActionGroup\n- Effects, Facades, @ngrx\/entity & @ngrx\/data\n- Creating a Signals Store using @ngrx\/signals\n- NgRx and Signals Interoperability\n- Side Effects using rxMethod\n- Signals Store, Entity & Custom Data Services\n- Implementing and using Custom Store Features\n- Tracking State changes\nAdvanced Routing and App Initialization\n\n\n- Dependency Injection in Depth: Resolution modifiers and Dependency providers\n- Using Constructor vs inject for DI\n- App initialization & Interceptors\n- Global Error Handling & Http-Error Interceptor with Retry-Patterns\n- Using Preloading Strategies & Functional Resolvers\n- Functional Route Guards\n- Route Redirect Functions\n- Binding Router-Params to Component Inputs & routerOutletData\n- View Transition Api\n- Auxiliary Routes: Common use cases\n- Router Animations & Anchor Scrolling\nAdvanced Testing with Jasmine, Jest, Cypress and NgRx\n\n\n- Introduction Angular Testing Tools (Jasmine, Karma, Jest & Cypress)\n- Testing Classes, Pipes, Directives\n- Testing Services using HttpClientTestingModule & HttpTestingController\n- Testing Component Interaction (Read, Write, Emit, Inputs)\n- Complex Forms Testing & Deferrable Views\n- Testing Observables & Signals\n- Material Testing using Component Harnesses\n- Async Component Testing (done, fakeAsync, waitForAsync)\n- Marble-testing RxJS\n- Testing NgRx Classic: Mock Store, Mock Selectors, Reducers, Effects, Facades\n- Testing Signal Store & Custom Features\n- Using Jest for Unit Testing (Setup, Changes in spec, Snapshot Tests)\n- Introduction to End-2-End Testing using Cypress\nReusability with Libraries, Nx & Angular Elements\n\n\n- Angular Building Blocks: Workspace, Apps, Libraries\n- Reusable Artifacts using Angular Libraries\n- Introduction to Nx Workspaces\n- Creating a reusable AI Chat Component using Angular Elements\nReal Time Micro-Frontends & Progressive Web Apps\n\n\n- Introduction to Micro-Frontends\n- Real Time connected Micro-Frontend processing Cloud Events\n- Introduction to Progressive Web Apps\n- HTML 5 APIs\n- Understanding and Configuring Service Workers & Manifests\n- Installing & Updating Progressive Web Apps\nServer Side Rendering (SSR)\n\n\n- Introduction to Server Side Rendering (SSR)\n- Build-time pre-rerendering\n- Optimize Components using Platform Specific Code\n- Hybrid Rendering\n- Introduction to Hydration & Incremental Hydration\nOptimizing Applications\n\n\n- Using Chrome Dev Tools & Lighthouse for Performance Optimization\n- Understanding & Using Page Traces & Web Vitals\n- Analyzing and Optimizing Bundles & Components\n- Build Optimizations using Angular CLI\n- Optimizing Images using NgOptimizedImage\n- Data-Loading Strategies, Virtual- & Infinite Scrolling,\n- Understanding, Profiling & Optimizing Angular Change Detection\n- Zoneless Change Detection\n- Using @angular\/localize\n- Accessibility A11y: Best Practices & Linting\n- Using Linting and Autoformat with Prettier\n- Configuration Management & Containers","summary_plain":"This is a workshop for experienced Angular developers who want to deepen their knowledge and skills in Angular development. It consists of 10 modules each covering different advanced topics in Angular development. The workshop is designed to be hands-on and interactive, with a mix of lectures, demos, and exercises. It allows participants to deepen their Angular skills for Classic Angular Development but also teaches the updates introduced by the Angular Renaissance Initiative like using Standalone Components, functional Implementations, Signals, and NgRx SignalStore.","skill_level":"Expert","version":"14","duration":{"unit":"d","value":4,"formatted":"4 jours"},"pricelist":{"List Price":{"IL":{"country":"IL","currency":"ILS","taxrate":17,"price":11070},"DE":{"country":"DE","currency":"EUR","taxrate":19,"price":2690},"CH":{"country":"CH","currency":"CHF","taxrate":8.1,"price":2690},"AT":{"country":"AT","currency":"EUR","taxrate":20,"price":2690},"SE":{"country":"SE","currency":"EUR","taxrate":25,"price":2690},"SI":{"country":"SI","currency":"EUR","taxrate":20,"price":2690}}},"lastchanged":"2026-03-24T19:23:56+01:00","parenturl":"https:\/\/portal.flane.ch\/swisscom\/fr\/json-courses","nexturl_course_schedule":"https:\/\/portal.flane.ch\/swisscom\/fr\/json-course-schedule\/23412","source_lang":"fr","source":"https:\/\/portal.flane.ch\/swisscom\/fr\/json-course\/training-ngadv"}}