Angular Addicts #33: NgRx 19, using the Page Object Model in tests, Micro Frontends using Vite & more

👋Hey fellow Angular Addict

This is the 33rd issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are 32nd 31st, and 30th issues)

📢 Release announcements

📢 Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Brandon Roberts announces the latest version of NgRx, some of the new features:

• SignalStore introduces the withProps feature to define static properties or observables in a SignalStore during creation.
• New signalMethod utility function, it gives you the benefits of rxMethod with the ability to use only use signals.
• Development mode checks in patchState function ensuring state immutability during development.
• NgRx Store now supports action dispatch on Signal changes.

💎Angular Gems of December, 2024

📰 My new Angular Coding Style

Kevin Kreuzer has rewritten a large codebase using Signals and the new Angular APIs recently. In this article, he explains the new coding styles and patterns that emerged during the refactoring. Key points include the adoption of standalone components as a standard, the transition to using Signals for reactivity, and moving away from traditional lifecycle hooks.

📰 Using Angular’s Resource API with the NGRX Signal Store

Manfred Steyer shows how to use SignalStore's withProps feature with the Resource API. His guide also includes connecting template-driven forms using linkedSignal and signalMethod.

📰 Using the Page Object Model design pattern in Angular applications

Francesco Borzì's article discusses the implementation of the Page Object Model (POM) design pattern in Angular applications. POM allows tests to focus on "what" needs to be done while the page object handles "how" the interaction with the DOM is done, leading to cleaner and more maintainable test code. Francesco also introduces his new library, ngx-page-object-model, designed to facilitate the use of POM in Angular component tests and compatible with various testing frameworks.

📰 Setup a Micro-Frontend architecture in 15min with Vite!

In his article, Meidi Airouche outlines the creation of a micro-frontend architecture using Vite, integrating Vue.js, Angular, and React components into a modular news portal. The project combines:

• Vue.js Header for navigation
• React Trending section for latest articles
• Angular Highlights area for popular content

📰 Mastering Component Communication in Angular

Michał Grzegorczyk provides a comprehensive overview of various methods for facilitating communication between components in Angular applications. Key topics covered include:

• Input, Output, Setter and ngOnChanges lifecycle hook
• @Injectable Services
• Component/Directive injection
• Template variables (#)
• Content Projection (@ContentChild / contentChild() / @ContentChildren / contentChildren())
• View and Query List (@ViewChild / viewChild() / @ViewChildren / viewChildren())
• Routing (parameters, queries, withComponentInputBinding(), state objects)

👨‍💻About the author

My name is Gergely Szerovay, I worked as a data scientist and full-stack developer for many years, and I have been working as frontend tech lead, focusing on Angular based frontend development. As part of my role, I'm constantly following how Angular and the frontend development scene in general is evolving. To share my knowledge, I started the Angular Addicts monthly newsletter and publication in 2022, so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered. Let me know if you would like to be included as a writer. Let’s learn Angular together! Subscribe here 🔥

Angular has evolved very rapidly over the past few years, and in the past year, with the rise of generative AI, our software development workflows have also evolved rapidly. In order to closely follow the evolution of AI-assisted software development, I decided to start building AI tools in public, and publish my progress on AIBoosted.dev. Join my on this learning journey: Subscribe here 🚀

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

• Angular Addicts #32: Angular 19, new Style guide RFC & more
• Angular Addicts #31: The new Resource API, effect updates & more
• Angular Addicts #30: When to use effects, Angular DI features, request caching & more

📨 Submit your Angular resource

Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on Twitter! I might feature it in the next Angular Addicts issue!