Synchronization of State in Dynamic Angular Components

Share on facebook
Share on google
Share on twitter
Share on linkedin

In this video, I go through a common trap when dealing with state synchronization in dynamic and nested presentation components when developing Angular apps. The solution is to use reactive inputs which will give you the best of both worlds and make sure you still are keeping the clean smart/dumb component architecture. If you liked the video make sure to comment and subscribe. 🙂


Hello, everyone, this is Christian Lüdemann here and this video is about how to synchronize state in dynamic components. Let’s start by look at a classic setup. We have a page container component which is communicating with a service and that service is able to dynamically create an Angular component and that Angular component is containing a presentation component and the page container component is getting its state from the store, that is, either an NgRx store or other reactive stores.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

Angular Mastery Book

Angular Mastery Free Ebook From principles to practice. Accelerate your path to Angular mastery by learning the principles of the industry’s best practices and how you can apply them to your own projects. It’s the manual I wish I had when I got started with Angular development 10 years ago that is designed to save

Read More »

Build a Course Platform with SPARTAN Stack

Build a Course Platform with the SPARTAN Stack​ Step by Step Guide giving you a full production ready setup with industry best practices. <p style=”text-align: center;”><b>Press for sound.</b><b></b></p> <h2>Here’s what’s inside…</h2> <p >Section 1</p> <h2>Designing the course portal (Figma)</h2> <p style=”text-align: left;”>We will cover the fundaments of designing a brand new site in Figma including

Read More »


Develop Real Projects With Industry Best Practices Join our community of expert developers and get the industry level best practices, step-by-step, from real projects. Hi, I’m Christian Lüdemann I’m a web developer from Denmark and the creator of this blog. You are here to learn how to code like the best companies and learn

Read More »

Debugging Angular apps (with Sentry) and workflow

In this video, we cover the topic of debugging Angular apps and provide an overview of various tools and approaches that can be used. I highlight the use of Sentry as a tool for error logging and performance monitoring. I also cover my scientific approach to fixing hard-to-debug bugs. Do you want to become an

Read More »