{"course":{"productid":23412,"modality":1,"active":true,"language":"de","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><strong>Standalone Components - Concepts &amp; Migration:<\/strong> Verstehen Sie die Unterschiede zwischen Standalone Components und Modules, tauchen Sie in den Angular-Bootstrapping-Prozess ein und lernen Sie, wie Sie ein bestehendes Projekt auf die Nutzung von Standalone Components migrieren.<\/li><li><strong>Components &amp; Forms Deep Dive:<\/strong> Erkunden Sie fortgeschrittene Komponenten- und Formtechniken, einschliesslich control flow syntax, deferred loading, content projection, cascading reactive forms und der Erstellung benutzerdefinierter Controls mit erweiterter Validierung und Fehlerbehandlung.<\/li><li><strong>Mastering Reactive Programming using RxJS:<\/strong> Meistern Sie RxJS-Konzepte wie observables, operators und Fehlerbehandlungsstrategien sowie praktische Debugging- und Testtechniken f&uuml;r die Implementierung benutzerdefinierter Observable Operators.<\/li><li><strong>Mastering Reactivity using Signals.<\/strong> Erlernen Sie den Umgang mit Signals und deren Interoperabilit&auml;t mit Observables, Datenabrufmethoden und effektive Kommunikation zwischen Komponenten mithilfe fortgeschrittener Signaltechniken und dem Event Bus pattern.<\/li><li><strong>State Management using NgRx Classic &amp; NgRx SignalStore:<\/strong> Entdecken Sie State Management Patterns, implementieren Sie sowohl NgRx Classic als auch SignalStore, verwalten Sie Side Effects und erstellen Sie benutzerdefinierte Store Features, w&auml;hrend Sie &Auml;nderungen im State effizient verfolgen.<\/li><li><strong>Advanced Routing and App Initialization:<\/strong> Erhalten Sie tiefgehende Einblicke in dependency injection, app initialization, global error handling und fortgeschrittene Routing-Techniken einschliesslich view transitions, auxiliary routes und router animations.<\/li><li><strong>Advanced Testing with Jasmine, Jest, Cypress and NgRx:<\/strong> Testen Sie Angular-Anwendungen umfassend mit Tools wie Jasmine, Jest und Cypress, einschliesslich Unit Tests, komplexer Formularpr&uuml;fungen, State Management Tests und End-to-End Tests.<\/li><li><strong>Reusability with Libraries, Nx &amp; Angular Elements:<\/strong> Erstellen Sie wiederverwendbare Angular-Artefakte mit Libraries und Nx Workspaces und entwickeln Sie wiederverwendbare Komponenten wie einen AI-Chat mit Angular Elements.<\/li><li><strong>Real Time Micro-Frontends &amp; Progressive Web Apps:<\/strong> Verstehen Sie Micro-Frontends und Progressive Web Apps, mit Fokus auf Echtzeit-verkn&uuml;pfte Micro-Frontends, HTML5 APIs, service workers und die Installation und Aktualisierung von PWAs.<\/li><li><strong>Server Side Rendering (SSR):<\/strong> Lernen Sie SSR kennen, einschliesslich build-time pre-rendering, der Optimierung von Komponenten f&uuml;r serverseitige Ausf&uuml;hrung, hybrid rendering und incremental hydration f&uuml;r verbesserte Leistung.<\/li><li><strong>Optimizing Applications:<\/strong> Verwenden Sie Tools wie Chrome Dev Tools und Lighthouse zur Optimierung der Anwendungsleistung, analysieren Sie Bundles, verbessern Sie die Change Detection und stellen Sie sicher, dass Best Practices f&uuml;r Accessibility und Konfigurationsmanagement eingehalten werden.<\/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>Dies ist ein Workshop f&uuml;r erfahrene Angular-Entwickler, die ihr Wissen und ihre F&auml;higkeiten in der Angular-Entwicklung vertiefen m&ouml;chten. Er besteht aus 10 Modulen, die jeweils verschiedene fortgeschrittene Themen der Angular-Entwicklung abdecken. Der Workshop ist praxisorientiert und interaktiv gestaltet, mit einer Mischung aus Vortr&auml;gen, Demos und &Uuml;bungen. Er erm&ouml;glicht es den Teilnehmern, ihre Angular-F&auml;higkeiten f&uuml;r Classic Angular Development zu vertiefen, vermittelt aber auch die Neuerungen der Angular Renaissance Initiative wie die Nutzung von Standalone Components, functional Implementations, Signals und NgRx SignalStore.<\/p>","contents_plain":"- Standalone Components - Concepts & Migration: Verstehen Sie die Unterschiede zwischen Standalone Components und Modules, tauchen Sie in den Angular-Bootstrapping-Prozess ein und lernen Sie, wie Sie ein bestehendes Projekt auf die Nutzung von Standalone Components migrieren.\n- Components & Forms Deep Dive: Erkunden Sie fortgeschrittene Komponenten- und Formtechniken, einschliesslich control flow syntax, deferred loading, content projection, cascading reactive forms und der Erstellung benutzerdefinierter Controls mit erweiterter Validierung und Fehlerbehandlung.\n- Mastering Reactive Programming using RxJS: Meistern Sie RxJS-Konzepte wie observables, operators und Fehlerbehandlungsstrategien sowie praktische Debugging- und Testtechniken f\u00fcr die Implementierung benutzerdefinierter Observable Operators.\n- Mastering Reactivity using Signals. Erlernen Sie den Umgang mit Signals und deren Interoperabilit\u00e4t mit Observables, Datenabrufmethoden und effektive Kommunikation zwischen Komponenten mithilfe fortgeschrittener Signaltechniken und dem Event Bus pattern.\n- State Management using NgRx Classic & NgRx SignalStore: Entdecken Sie State Management Patterns, implementieren Sie sowohl NgRx Classic als auch SignalStore, verwalten Sie Side Effects und erstellen Sie benutzerdefinierte Store Features, w\u00e4hrend Sie \u00c4nderungen im State effizient verfolgen.\n- Advanced Routing and App Initialization: Erhalten Sie tiefgehende Einblicke in dependency injection, app initialization, global error handling und fortgeschrittene Routing-Techniken einschliesslich view transitions, auxiliary routes und router animations.\n- Advanced Testing with Jasmine, Jest, Cypress and NgRx: Testen Sie Angular-Anwendungen umfassend mit Tools wie Jasmine, Jest und Cypress, einschliesslich Unit Tests, komplexer Formularpr\u00fcfungen, State Management Tests und End-to-End Tests.\n- Reusability with Libraries, Nx & Angular Elements: Erstellen Sie wiederverwendbare Angular-Artefakte mit Libraries und Nx Workspaces und entwickeln Sie wiederverwendbare Komponenten wie einen AI-Chat mit Angular Elements.\n- Real Time Micro-Frontends & Progressive Web Apps: Verstehen Sie Micro-Frontends und Progressive Web Apps, mit Fokus auf Echtzeit-verkn\u00fcpfte Micro-Frontends, HTML5 APIs, service workers und die Installation und Aktualisierung von PWAs.\n- Server Side Rendering (SSR): Lernen Sie SSR kennen, einschliesslich build-time pre-rendering, der Optimierung von Komponenten f\u00fcr serverseitige Ausf\u00fchrung, hybrid rendering und incremental hydration f\u00fcr verbesserte Leistung.\n- Optimizing Applications: Verwenden Sie Tools wie Chrome Dev Tools und Lighthouse zur Optimierung der Anwendungsleistung, analysieren Sie Bundles, verbessern Sie die Change Detection und stellen Sie sicher, dass Best Practices f\u00fcr Accessibility und Konfigurationsmanagement eingehalten werden.","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":"Dies ist ein Workshop f\u00fcr erfahrene Angular-Entwickler, die ihr Wissen und ihre F\u00e4higkeiten in der Angular-Entwicklung vertiefen m\u00f6chten. Er besteht aus 10 Modulen, die jeweils verschiedene fortgeschrittene Themen der Angular-Entwicklung abdecken. Der Workshop ist praxisorientiert und interaktiv gestaltet, mit einer Mischung aus Vortr\u00e4gen, Demos und \u00dcbungen. Er erm\u00f6glicht es den Teilnehmern, ihre Angular-F\u00e4higkeiten f\u00fcr Classic Angular Development zu vertiefen, vermittelt aber auch die Neuerungen der Angular Renaissance Initiative wie die Nutzung von Standalone Components, functional Implementations, Signals und NgRx SignalStore.","skill_level":"Expert","version":"14","duration":{"unit":"d","value":4,"formatted":"4 Tage"},"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\/json-courses","nexturl_course_schedule":"https:\/\/portal.flane.ch\/swisscom\/json-course-schedule\/23412","source_lang":"de","source":"https:\/\/portal.flane.ch\/swisscom\/json-course\/training-ngadv"}}