Angular
State Management
RxJs logowith NgRx Workshop

Still managing your Angular application state with buggy ad hoc services?

Master your Angular application state management with NgRx’s robust, repeatable patterns and best practices!

Scroll down for more content icon

NgRx is a powerful library
used to manage Angular application state

NgRx allows you to manage Angular application state using robust predictable and repeatable patterns that increase developer productivity and application maintainability while preventing troublesome bugs caused by inconsistent state.

NgRx logo

You’re already using
Angular to manage your views,
why not maintain the same
structured approach
for your application state ?

Best in category

Background waves

With over a decade of battle-testing, hands-on use and feedback by countless developers worldwide , NgRx remains the best tool for implementing one-way data flow pattern and clear separation of concerns between read, update and side-effects elements of application logic.

Streamlined architecture

Background waves

Its architecture simplifies development by splitting problems into the read and update halves of logic in question making development twice as simple.

Though it’ll feel even more so by enabling you to focus on one half of a problem at a time .

As simple as it gets

Background waves

The genius of NgRx API design means 80% of implementation consists of pure functions that are the simplest thing to write, understand and test.

The remaining 20% consists of tamed RxJs streams implemented in standardized NgRx side-effects.

Tailored for enterprises

Background waves

Most enterprise applications are variations of standard CRUD , which hide behind custom business flows and rarely face truly unique challenges.

These applications are ideally suited for standardized, optimized solutions like NgRx!

Use NgRx for every non-trivial Angular application
to manage state without a headache

Ad hoc state management of Angular applications leads to predictable problems that are a nightmare to fix once established. Full rewrites are an expensive solution to escaping the tangled web of state managed by ad hoc services and there’s no guarantee it’ll work next time around…

Duplicate state <br> Duplicated state 😉

Duplicate state
Duplicated state 😉

With no standardized state management solution, developers split and store state across multiple locations in components and services. Such state accumulates overlaps, duplications and must be manually synchronized.

It is more productive to embrace a single source of truth pattern implemented in a centralized state store just like NgRx offers.

Manual state <br> synchronization

Manual state
synchronization

Manual state synchronization represents major overhead. Increased state duplication demands that more synchronization logic is introduced and maintained.

Incorrect or excessive synchronization logic leads to inconsistent state, buggy behavior and user confusion.

Hard-to-debug <br> inconsistent state

Hard-to-debug
inconsistent state

Duplicated state and manual state synchronization lead to inconsistent state, manifesting as nonsensical UI that presents contradicting info.

At best, this confuses users. At worst, the inconsistent state reaches backend and databases with catastrophic consequences (especially in serverless situations).

Ad hoc patterns by <br> developers or entire teams

Ad hoc patterns by
developers or entire teams

Most software engineers tend to develop idiosyncratic patterns when unsupported by a standardized, repeatable approach such as the framework provided by NgRx.

Preventing this is one key reason that we render data using Angular. One-off, ad hoc approaches reduce velocity, rack up costs and make it incredibly tough to move developers between projects. It’s all easily prevented via NgRx’s standardized approach.

Continual reinvention of the wheel

Continual reinvention of the wheel

NgRx’s standardized solution is continually advanced by a devoted global community that contributes millions of hours of use and feedback to its team.

Custom solutions simply cannot compete with the higher quality functionality, refined ergonomics, fewer bugs and rich learning resources of NgRx.

Bloated components

Bloated components

With no standardized location to implement state management, logic moves at random into services and components. This is especially problematic when it ends up in components. The resultant mix of responsibilities rendering view and handling of user interaction versus state management bloats components.

Components should always be kept as lean as possible to minimize component testing, which is usually the most complex, time-consuming aspect of any project.

RxJs overuse

RxJs overuse

Without standardized patterns for state management, developers tend to overuse RxJs streams a highly complex topic in itself.

NgRx API is shaped using feedback from a global developer community that enables 80% of NgRx logic to remain free from RxJs streams! RxJs is only used lightly within NgRx effects and can be split into easily-understood, highly composable segments.

Cut your NgRx learning curve

Cut your NgRx learning curve

NgRx empowers us to solve every one of these Angular application state management issues and enjoy just as many benefits but mastering NgRx is a challenge in itself.

As with every powerful tool, we must ensure it is used correctly to achieve the results desired. Streamline your team’s NgRx learning curve and gain the vital skills for implementing state management logic from the get-go!

Get in touch
NgRx logo

Writing ad hoc rendering logic
is unanimously seen as a mistake.
It’s why we use frameworks like Angular
so why should we manage
our application state any differently?

A better way to manage your Angular application state

Empower your team to implement NgRx-based logic the right way. While always possible to fix what's broken, it’s far better to prevent it happening in the first place!

NgRx presentation

Correct approaches & techniques

Help your teammates learn to implement NgRx-based state management logic with confidence. Prevent all the common issues described above by learning how to implement standardized, pattern based state management in any Angular application.

NgRx reactive programming

Common patterns

Get to know the tried-and-tested patterns used to solve common requirements when implementing state management in Angular enterprise applications. Everything from slicing your state into independent slices and computing derived state for your views to deep linking and effects composition.

NgRx best practices

Best Practices

Acquaint your team with every NgRx best practice using easy-to-remember mantras. Once these mantras become engrained, your team will effortlessly fall back on and benefit from them during daily work.

NgRx logo

Never duplicate state in your store!
Instead, compute your derived state
using NgRx selectors.

Testimonials

We have shared our industry-leading NgRx insights, patterns and best practices with countless developers both one-on-one and entire teams.

Nothing makes us happier than enriching teams with the know-how to deliver successful projects and amaze users (as well as themselves)!

So, what do our participants think?

Workshop

Both beginners and experienced developers from multiple teams were able to take away a lot of new know how from this workshop!

The 2-day format is great and provides enough time to cover all the bases. Everything from general idea of state management without specific approach all the way to architecture and best practices when doing so using NgRx.
Tomas is a great teacher, he is very enthusiastic to share his experience and expertise while supporting participants during hands on exercises. More so, we could get answers to specific questions related to state management in our ongoing projects!
Christof Leuenberger

Christof Leuenberger

Software Architekt, Die Mobiliar

Bern, Switzerland

Workshop
The course is a highlight. Tomas explains in great detail, shows pros and cons of alternatives, has tons of examples at hand and shares all the background of the features of NGRX.
Emanuel Indermühle

Emanuel Indermühle

Software Architekt, Die Mobiliar

Bern, Switzerland

Workshop
Die Dozenten verfügen über tiefgründiges Wissen in Ihren Themenbereichen. Sie vermitteln die Informationen nicht einfach, sondern erreichen die Teilnehmer. Ein Mitarbeiter sagte bereits, dass er sich sehr darauf freut, seinen Code zu verbessern, weil er jetzt wirklich sieht, wie es gemacht werden sollte.
Päivi Tuhkanen

Päivi Tuhkanen

Manager, VMS

Helsinki, Finland

Workshop
Dieser Kurs wurde bereits für zwei unser Entwicklungsteams durchgeführt. Das Feedback war beide Male sehr positiv! Der Inhalt ist vollständig und immer auf dem aktuellen Stand. Ich empfehle diesen Kurs all jenen, die ihre Fähigkeiten verbessern wollen!
Dany Marques

Dany Marques

Software Architekt, La Mobilière

Nyon, Switzerland

Workshop
Thanks a lot for the introduction to NgRx. The course was very clean structured and everything nicely explained.
Anonymous Feedback

Anonymous Feedback

Software Entwickler, La Mobilière

Bern, Switzerland

Workshop
Great workshop with space for Q&A. Solid background information. Good balance between theory and hands-on.
Anonymous Feedback

Anonymous Feedback

Software Entwickler, Die Mobiliar

Bern, Switzerland

Workshop
Excellent Workshop! I particularly liked the explanation of code in small steps (also in the slides)
Anonymous Feedback

Anonymous Feedback

Software Entwickler, Die Mobiliar

Bern, Switzerland

Pricing & options

Book a 2-day workshop for your team and level up your NgRx skills

  • Personalized feedback

    From our experience, up to 20 participants per workshop provides an optimal student/trainer ratio. This enables us to provide sufficient attention to all participants to address every individual question and support them during the hands-on exercises.
  • In person workshops

    We strongly recommend in-person workshops, which provide unparalleled interaction and maximise the value of your time with us. In-person workshops generate deeper questions, clearer answers and the best setting for sharing extra feedback and know-how.
  • Special options

    We also provide the opportunity to focus on only half the workshop content (e.g. basics for total beginners/advanced sections only for experienced participants).
NgRx logo

Angular State Management with NgRx Workshop

Background waves
Price background
$ 9.749 + applicable VAT
  • All-inclusive price
  • Up to 20 participants
  • In-person / hybrid / fully remote
  • 2 full days (or 4 half days)
Get in touch
  • Rich content

    There will always be more content and resources available, so we do not expect you to complete all the work provided during the workshop itself. You will keep all content for future reference.
  • Tailored for the audience

    We will always focus on the topics that bring the most value to the largest number of participants. To do this, we tailor each workshop to suit the unique needs of your team and guide you through the elements of NgRx most applicable to your projects.

    More advanced groups may breeze through the official content, then focus on specific use cases in a live coding session. Other groups may use the workshop to build a strong NgRx foundation then continue advancing their skills at their own pace.

Workshop content

Here’s a full outline of the workshop that features all concepts, topics and examples covered.

Please note, our workshop content will continually evolve as we factor in participant feedback to deliver the most valuable experience possible.

school General state management

Background waves
  • Introduction to state management
  • State types overview
  • Where can the state be stored
  • State synchronization
  • Approaches to state handling
  • Heuristics
  • State management libraries overview
  • Component state management
  • Service based state management

house Basic NgRx state management

Background waves
  • Theory and hands on exercises
  • Component Store (lightweight NgRx solution for simple apps)
  • Store (configuration, state slices, ...)
  • Selectors (pluck state, derived state, memoization)
  • Actions (tips, good action hygiene, ...)
  • Reducers (immutability, ES spread syntax...)
  • Dev tools (get current state, state diffs, ...)

account_balance Advanced NgRx state management

Background waves
  • Theory and hands on exercises
  • Effects (async operations, long running processes, ...)
  • Testing (of every concept, best practices, ...)
  • Entity (further reduction of boilerplate)
  • Router Store (Angular Router integration)
  • Schematics (generate most of the code)
  • Data / Facade
  • Tips and best practices

turned_in_not Side-track topics

Background waves
  • Immutability
  • Angular app architecture
  • RxJs flattening operators
  • RxJs marble testing syntax
  • State Normalization

attachment Extra resources

Background waves
  • Full workshop in PDF format for future reference and knowledge preservation
  • Extensive range of exercises and solutions (github repository)
  • Workshop participation certificate
  • Review of individual questions and exercises during hands-on phase
Workshop slides example - NgRx store state slicesWorkshop slides example - NgRx selectorsWorkshop slides example - NgRx reducer tipsWorkshop slides example - NgRx heuristicsWorkshop slides example - NgRx entity patternWorkshop slides example - NgRx hands on exercisesWorkshop slides example - NgRx architecture

Meet your instructors

Tomas and Kevin are two of Switzerland’s leading Google Developer Experts. With less than 150 such experts worldwide, partnering with us unlocks a wealth of knowledge that we’re eager to share with your team.

Benefit from our extensive knowledge in a concentrated, proven format and level up your team’s new RxJs capabilities!

Kevin Kreuzer - GDE for Angular & Web Technologies

Kevin Kreuzer

GDE for Angular & Web Technologies

Trainer, Berater und Senior Front-End Engineer mit Schwerpunkt auf dem modernen Web. Er ist sehr erfahren in der Implementierung, Wartung und Verbesserung von Anwendungen und Kernbibliotheken für große Unternehmen.

Kevin ist ständig dabei, sein Wissen zu erweitern und zu teilen. Er unterhält mehrere Open-Source-Projekte, unterrichtet moderne Webtechnologie in Workshops, Podcasts, Videos und Artikeln. Weiter ist er ein beliebter Referent auf Konferenzen. Er schreibt für verschiedene Tech-Publikationen und war 2019 der aktivste Autor der beliebten Angular In-Depth Publikation.

Tomas Trajan - GDE for Angular & Web Technologies

Tomas Trajan

GDE for Angular & Web Technologies

Ein Google-Developer expert für Angular und Webtechnologien, der als Berater und Angular-Trainer arbeitet. Derzeit unterstützt er weltweit Teams in Unternehmen bei der Implementierung von Kernfunktionalitäten, Architekturen, der Einführung von Best Practices, und der Optimierung von Arbeitsabläufen.

Tomas ist ständig bestrebt, seinen Kunden und der breiteren Entwicklergemeinschaft einen maximalen Nutzen zu bieten. Seine Arbeit wird durch eine umfangreiche Erfolgsbilanz unterstrichen, in der er populäre Fachartikel veröffentlicht, Vorträge auf internationalen Konferenzen und Meetups hält und zu Open-Source-Projekten beiträgt.

Background surfaceExperts teaching Angular

Unerreichte Kompetenz

Ganz gleich, ob Sie ein kleines Startup oder ein großes Unternehmen mit zahllosen Teams, Entwicklern und Projekten sind - unsere Branchenkenntnisse helfen Ihnen, die Dinge richtig zu machen, die Lernkurve zu verkürzen und die Produktivität zu maximieren.

Unsere Blogs werden von Millionen gelesen, unser Open Source wird von Zehntausenden von Entwicklern genutzt und wir verändern die geschäftliche Laufbahn von unzähligen Menschen bei lokalen Treffen und internationalen Konferenzen.

Wir haben direkten Kontakt zum Angular-Kernteam von Google und das erweiterte Google Developer Expert Netzwerk. Dadurch sind wir in der Lage, auch die schwierigsten Probleme mit Leichtigkeit und Zuversicht zu lösen!

Blog posts

Stats number background
über5 MillionenAnsichten

Millionen von Menschen haben von unserem regelmäßig aktualisierten Blog profitiert, in dem wir einsteigerfreundliche sowie tiefgehende Inhalte zu Angular, NgRx und Frontententwicklung im Allgemeinen veröffentlichen.

Zu Tomas's BlogZu Kevin's Blog

Workshops

Stats number background
über350 Teilnehmerausgebildet

Unzählige Entwickler sowohl von Startups als auch von grossen Unternehmen haben ihre Angular- und Frontend-Kenntnisse dank unserer fesselnden, immersiven und äußerst beliebten Workshops verbessert.

Zum Angebot

Open source

Stats number background
über2 MillionenDownloads

Viele Teams auf der ganzen Welt haben mit Hilfe unserer anerkannten Open-Source-Projekte, von denen einige über 2500 GitHub-Stars aufweisen, wichtige Entwicklungsprobleme gelöst und ihre Qualität verbessert.

Kevins's npm PaketeTomas's npm Pakete

Vorträge

Stats number background
an über30 Eventspräsentiert

Communities auf der ganzen Welt profitieren von unseren Vorträgen auf ihren Veranstaltungen. Von lokalen Meetups bis hin zu internationalen Konferenzen. Wir teilen unser Know-how für erfolgreiche Angular-Entwicklung mit etablierten Entwicklern und zukünftigen Talenten.

Endecke Tomas's VorträgeEndecke Kevins's Youtube Kanal

Get in touch

Empower your team with real-world NgRx know-how gained from our lifetime of consulting, leading workshops and tutoring enterprises and startups alike.

Our unique pathway has taught us much and we’re keen to share it with You! Our workshop attendees enjoy a structured, high-quality content that distills all our knowledge into an unparalleled, immersive 2-day workshop experience.

To learn more about our workshops, reach out to us directly using the below form.