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 Architect, Die Mobiliar

Bern, Switzerland

Workshop
I learned so much in the NgRx 2 day workshop. After the first day I was already inspired to take a closer look to our current implementation and decided to improve the whole structure. This reduced the component size dramatically, which made testing way more enjoyable and had also had a big impact on test performance!
Igor Stojanovic

Igor Stojanovic

Software Engineer, 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 Architect, Die Mobiliar

Bern, Switzerland

Workshop
The instructors really knew topics they presented and what a training means - that’s more than sharing information. One person already said that he is so excited to do some improvement into his code because now he really sees how it should be done.
Päivi Tuhkanen

Päivi Tuhkanen

Manager, VMS

Helsinki, Finland

Workshop
This course has already been given to two teams of developers. The feedback has been very positive both times! The content is very complete and evolves along with the framework. I strongly recommend this course to all those who wish to improve their skills!
Dany Marques

Dany Marques

Software Architect, 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 Engineer, 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 Engineer, 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 Engineer, Die Mobiliar

Bern, Switzerland

Workshop
It was very informative and I've learned a lot! It's was a lot of content so my brain is on fire now!
Anonymous Feedback

Anonymous Feedback

Software Engineer, Die Mobiliar

Bern, Switzerland

Overall satisfaction

4.57

rated by 72 participants

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 now
  • 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 NgRx capabilities!

Nivek - GDE for Angular & Web Technologies

Nivek

GDE for Angular & Web Technologies

A trainer, consultant, and senior front-end engineer with a focus on the modern web, as well as a Google Developer Expert for Angular & Web technologies. He is deeply experienced in implementing, maintaining and improving applications and core libraries on behalf of big enterprises worldwide.

Kevin is forever expanding and sharing his knowledge. He maintains and contributes to multiple open-source projects and teaches modern web technologies on stage, in workshops, podcasts, videos and articles. He is a writer for various tech publications and was 2019’s most active Angular In-Depth publication writer.

Tomas Trajan - GDE for Angular & Web Technologies

Tomas Trajan

GDE for Angular & Web Technologies

A Google Developer Expert for Angular & Web Technologies working as a consultant and Angular trainer. Currently empowering teams in enterprise organizations worldwide by implementing core functionality and architecture, introducing best practices, sharing know-how and optimizing workflows.

Tomas strives continually to provide maximum value for customers and the wider developer community alike. His work is underlined by a vast track record of publishing popular industry articles, leading talks at international conferences and meetups, and contributing to open-source projects.

Background surfaceExperts teaching Angular

Unmatched Expertise and Access

Whether you’re a tight-knit startup or large enterprise with countless teams, devs and projects, our industry mastery can help you do things right, reduce learning curves and maximize productivity.

Our blogs are read by millions, our open source used by tens of thousands developers, and we change the business trajectory of countless people at local meetups and international conferences.

We possess direct access to Google’s core Angular team plus the extended Google Developer Expert network, providing us with a unique position to make light work of the most challenging issues with ease and confidence!

Blog posts

Stats number background
over 6 million views

Millions of people benefited and learned from our frequently updated blog which shares beginner-friendly and in-depth content within the Angular, NgRx and front-end spheres.

Angular Experts' blog Read Tomas's blog Read Kevin's blog

Workshops

Stats number background
over 500 people educated

Countless developers — from startups and enterprises alike — have supercharged their Angular and front-end skills thanks to our engaging, immersive and highly popular workshops

Explore workshop offer

Open source

Stats number background
over 2 million downloads

Many of teams worldwide have solved vital dev issues and elevated their provisions with the use of our acclaimed open-source projects some of which feature over 2500 GitHub stars

Kevin's npm packages Tomas's npm packages

Speaking

Stats number background
over 30 events attended

Communities around the world hosted our talks at their events ranging from local meetups to international conferences where we shared our know how for successful Angular development with established developers and future talent alike

Explore Tomas's talks Visit Kevin's Youtube channel

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.

or