<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Playful Programming Angular</title>
    <description>The latest articles on DEV Community by Playful Programming Angular (playfulprogramming-angular).</description>
    <link>https://dev.to/playfulprogramming-angular</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F3316%2F612534f5-7bba-4bfe-8455-998219bc57cf.png</url>
      <title>DEV Community: Playful Programming Angular</title>
      <link>https://dev.to/playfulprogramming-angular</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/playfulprogramming-angular"/>
    <language>en</language>
    <item>
      <title>Angular Addicts #51: spartan/ui 1.0, A2UI, Signal Debouncing &amp; more</title>
      <dc:creator>Gergely Szerovay</dc:creator>
      <pubDate>Thu, 16 Jul 2026 08:31:30 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/angular-addicts-51-spartanui-10-a2ui-signal-debouncing-more-48kb</link>
      <guid>https://dev.to/playfulprogramming-angular/angular-addicts-51-spartanui-10-a2ui-signal-debouncing-more-48kb</guid>
      <description>&lt;h2&gt;
  
  
  👋Hey fellow Angular Addict
&lt;/h2&gt;

&lt;p&gt;This is the 51st issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the &lt;a href="https://www.angularaddicts.com/p/angular-addicts-50-angular-22-agentic-deploying" rel="noopener noreferrer"&gt;50th&lt;/a&gt;, &lt;a href="https://www.angularaddicts.com/p/angular-addicts-49-analogjs-25-agentic-angular" rel="noopener noreferrer"&gt;49th&lt;/a&gt; and &lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;48th&lt;/a&gt;)&lt;/p&gt;

&lt;h2&gt;
  
  
  📢 Release announcements
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o"&gt;Announcing spartan/ui 1.0&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/robingoetz/" rel="noopener noreferrer"&gt;Robin Goetz&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  💎Angular Gems of June, 2026
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/ae-harness-setup-for-angular/" rel="noopener noreferrer"&gt;Agentic Engineering: How to Set Up Your Harness for Angular Development&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/thalhammer/" rel="noopener noreferrer"&gt;Alexander Thalhammer&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://angular.love/getting-to-know-angular-resource-snapshots" rel="noopener noreferrer"&gt;Getting to Know Angular Resource Snapshots&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/prodromouf" rel="noopener noreferrer"&gt;Fanis Prodromou&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/ryantsuji/making-the-context-across-46-repositories-semantically-searchable-for-ai-part-2-51d9"&gt;Making the Context Across 46 Repositories Semantically Searchable for AI (Part 2)&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/ryantsuji/" rel="noopener noreferrer"&gt;Ryosuke Tsuji&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angular.dev/demystifying-a2ui-how-to-make-ai-agents-speak-ui-in-your-app-e1ffea2303bd" rel="noopener noreferrer"&gt;Demystifying A2UI: How to Make AI Agents “Speak UI” in Your App&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/devinchasanoff/" rel="noopener noreferrer"&gt;Devin Chasanoff&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j"&gt;Angular resources are not a good fit for Guards&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/gerome-grignon/" rel="noopener noreferrer"&gt;Gerome Grignon&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/shhdharmen/angular-material-theming-system-course-now-100-free-1f1h"&gt;Angular Material Theming System Course — Now 100% Free&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/shhdharmen/" rel="noopener noreferrer"&gt;Dharmen Shah&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/dhutaryan/tanstack-query-style-caching-the-angular-native-way-4igc"&gt;TanStack Query style caching, the Angular-native way&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/dzmitry-hutaryan/" rel="noopener noreferrer"&gt;Dzmitry Hutaryan&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/architecture-beyond-layers-tsarch-for-ai-agents/" rel="noopener noreferrer"&gt;Architecture Beyond Layers: tsarch for AI Coding Agents&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/manfred-steyer-84645821/" rel="noopener noreferrer"&gt;Manfred Steyer&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://nartc.me/blog/ai-work-life-balance/" rel="noopener noreferrer"&gt;AI Made Coding Faster, But My Day Harder to End | Chau Tran&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/chauntran/" rel="noopener noreferrer"&gt;Chau Tran&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angulartraining.com/how-to-debounce-angular-signals-14425d2cd63e" rel="noopener noreferrer"&gt;How to Debounce Angular Signals?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/achautard/" rel="noopener noreferrer"&gt;Alain Chautard&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/sylwia-lask/7-new-javascript-features-and-2-im-still-waiting-for-2ck8"&gt;7 New JavaScript Features (And 2 I'm Still Waiting For)&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/sylwia-laskowska-5a8467131/" rel="noopener noreferrer"&gt;Sylwia Laskowska&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  👨‍💻About the author
&lt;/h2&gt;

&lt;p&gt;My name is &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;Gergely Szerovay&lt;/a&gt;, 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 &lt;a href="https://angularaddicts.com/" rel="noopener noreferrer"&gt;Angular Addicts&lt;/a&gt; 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! &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Subscribe here&lt;/a&gt; 🔥&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Substack (Angular Addicts)&lt;/a&gt;, &lt;a href="https://aiboosted.dev" rel="noopener noreferrer"&gt;Substack (AIBoosted.dev)&lt;/a&gt;, &lt;a href="https://medium.com/@GergelySzerovay" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;, &lt;a href="https://dev.to/gergelyszerovay"&gt;Dev.to&lt;/a&gt;, &lt;a href="https://twitter.com/GergelySzerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!&lt;/p&gt;

&lt;h2&gt;
  
  
  🕹️Previous issues
&lt;/h2&gt;

&lt;p&gt;If you missed the previous issues of the newsletter, you can read them &lt;a href="https://www.angularaddicts.com/t/angular-addicts-monthly" rel="noopener noreferrer"&gt;here&lt;/a&gt;, these are the latest 3 issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-50-angular-22-agentic-deploying" rel="noopener noreferrer"&gt;Angular Addicts #50: Angular 22, Agentic Angular, Deploying to the Cloud &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-49-analogjs-25-agentic-angular" rel="noopener noreferrer"&gt;Angular Addicts #49: AnalogJS 2.5, Agentic Angular &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;Angular Addicts #48: TypeScript 6, OnPush as default, AI tools &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  📨 Submit your Angular resource
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://twitter.com/gergelyszerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;! I might feature it in the next Angular Addicts issue!&lt;/p&gt;

</description>
      <category>angular</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Ng-News 26/17: PrimeNG's New Licensing, and A2UI for Angular</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Mon, 13 Jul 2026 15:18:58 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2617-primengs-new-licensing-and-a2ui-for-angular-4eik</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2617-primengs-new-licensing-and-a2ui-for-angular-4eik</guid>
      <description>&lt;p&gt;&lt;strong&gt;PrimeNG's new licensing model&lt;/strong&gt; and &lt;strong&gt;A2UI for model-controlled Angular interfaces&lt;/strong&gt; are the headline topics this week.&lt;/p&gt;

&lt;p&gt;Also in brief: OpenNG's community fork, transactional router resource behavior, and the current Native Federation and Module Federation options for Angular.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/0HI13Rhah0U"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Future of PrimeNG
&lt;/h2&gt;

&lt;p&gt;PrimeNG, a very popular UI component library, has announced that future major versions won't be available as open source anymore, except through a free Community license for individuals, students, non-profits, non-commercial open source projects, and small organizations.&lt;/p&gt;

&lt;p&gt;That doesn't just apply to the Angular version but to the React and Vue versions as well. The reason is that the library has grown over time, which means if you do this as open source you have to spend much more time on it, and at some point, the income that they got from selling things around the library itself didn't cover the costs anymore.&lt;/p&gt;

&lt;p&gt;The new licensing brand is PrimeUI. The launch price is USD 599 per developer. That is perpetual, so for life for the covered versions, and it includes one year of updates. It also includes PrimeUI PRO, which contains components for charts, text editor, scheduler, task board, and more. The Pro components are not part of the Community license.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://primeui.dev/nextchapter" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffqjltiegiezfetthbags.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fwebsite.images%2Fmeta%2Fmeta-primeui.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://primeui.dev/nextchapter" rel="noopener noreferrer" class="c-link"&gt;
            PrimeUI
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            PrimeUI is a complete UI ecosystem — premium component libraries, advanced pro components, UI kit, and design resources to build modern web applications.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffqjltiegiezfetthbags.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fwebsite.images%2Ffavicon%2Ffavicon.svg" width="16" height="16"&gt;
          primeui.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;That being said, OpenNG, an organization which maintains unmaintained libraries, announced that PrimeNG went closed-source, the GitHub repository was archived on June 28th, 2026, and OpenNG created a copy of the project with regenerated open issues and PRs. Their goal is to release a beta version supporting Angular 22. So we are talking here about a fork. At the time of this writing, the current name is &lt;code&gt;open-prime&lt;/code&gt;, but OpenNG says it is too close to PrimeNG because PrimeTek plans to put trademarks on it.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://www.linkedin.com/posts/openng_as-people-have-questions-about-the-future-activity-7479828161099198464-izyG" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2Fv2%2FD4E22AQGnln6sjuYamg%2Ffeedshare-shrink_800%2FB4EZ82wFEkIkAc-%2F0%2F1783330001527%3Fe%3D2147483647%26v%3Dbeta%26t%3DHFGqM_FIlkdiH5K5nitvi0vMq1CxUMv4WFfln-A6jSg" height="800" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://www.linkedin.com/posts/openng_as-people-have-questions-about-the-future-activity-7479828161099198464-izyG" rel="noopener noreferrer" class="c-link"&gt;
            OpenNG Update: Funding, Versioning, PrimeNG and ngneat projects | OpenNG posted on the topic | LinkedIn
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            As people have questions about the future of projects such as Spectator or PrimeNG, here is the current state of our actions.

OpenNG

We just renamed the initiative from OpenNG Foundation to OpenNG to avoid confusion and to respect the OpenJS Foundation trademark policy.

Funding

We are working on a funding model to support the maintenance of the projects and give back to contributors. We submitted the initiative to Open Collective and contacted HeroDevs for partnership.

Versioning Policy

We'll start over with v1.0.0 for all the packages. Each project will include a matrix compatibility table with the supported major Angular versions (including the previous package). Some packages were already not following the Angular versioning policy, and this will allow us to author a major version for breaking changes anytime.

PrimeNG

PrimeNG went closed-source, and the GitHub repository was archived on June 28th, 2026. Discover the announcement here.

We created a copy of the project and regenerated the open issues/PRs. Out of 968 open issues, 58 have already been closed, and 23 triaged as still relevant and accepting contributions to resolve them. Triaging was made possible thanks to the contribution of the community.

Our goal this week is to release a beta version supporting Angular 22, as people were already delaying updating their projects. 

It'll include:
- a set of unreleased changes from the original repository (modernize existing components, add a few new ones)
- ng add support for new projects
- ng update support as unreleased changes include a few breaking changes (camelcase selectors removed, deprecated APIs removed)

Our current blocker for this release is to find a proper name for the project. Currently named open-prime, it's too close to PrimeNG as PrimeTek plans to put trademarks on it. We asked the community for suggestions here.

We're evaluating proposals, with the main restriction being to avoid confusion with another project (many UI frameworks are matching the proposals).

ngneat projects

Out of the 34 original repositories, we decided to start working on the following ones:

- cashew
- query
- elf
- spectator

We have a volunteer working on cashew, currently preparing the first release.
Spectator is our priority within the ngneat ecosystem, planning a release this week. We also have a contribution to expose the jasmine package as a standalone (like jest/vitest ones, planned to land in 1.1.0.

We still need to triage the remaining repositories to understand if we should keep them or not. 13 of them might not be maintained anymore due to low activity or having a better alternative nowadays.

GitHub: https://lnkd.in/eE7QuzZR
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.licdn.com%2Faero-v1%2Fsc%2Fh%2Fal2o9zrvru7aqj8e1x2rzsrca" width="64" height="64"&gt;
          linkedin.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  A2UI
&lt;/h2&gt;

&lt;p&gt;Devin Chasanoff from the Angular team has published an article on how to use A2UI with Angular, which enables dynamic UI that is controlled by an AI model.&lt;/p&gt;

&lt;p&gt;The user expresses an intent through the frontend. The frontend sends that intent and relevant context to a model. This communication can also include a component catalog that the frontend knows how to render. The model can then decide whether UI components are needed, which components are appropriate, and return structured UI instructions to the application.&lt;/p&gt;

&lt;p&gt;A2UI is a protocol used for these agent-generated UI use cases. A2UI messages can be transported over HTTP, WebSocket, or Server-Sent Events, depending on the application architecture.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://blog.angular.dev/demystifying-a2ui-how-to-make-ai-agents-speak-ui-in-your-app-e1ffea2303bd" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1019%2F1%2AN552Qsvg9kAK3fH6B-Yoig.png" height="395" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://blog.angular.dev/demystifying-a2ui-how-to-make-ai-agents-speak-ui-in-your-app-e1ffea2303bd" rel="noopener noreferrer" class="c-link"&gt;
            Demystifying A2UI: How to Make AI Agents “Speak UI” in Your App | by Devin Chasanoff | Jun, 2026 | Angular Blog
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            I’ve spent a fair amount of time experimenting with A2UI, a protocol for building agentic interfaces. Why? Quite simply, because I think…
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afill%3A256%3A256%2F1%2AuJa0SU-F2NXVKhHTbP1HBw.png" width="256" height="256"&gt;
          blog.angular.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  routerResource
&lt;/h2&gt;

&lt;p&gt;In other news, work on integrating resource behavior with the router seems to have begun. A PR meant for internal usage popped up, which uses a snapshot-like router resource behavior to integrate navigation-specific information.&lt;/p&gt;

&lt;p&gt;That snapshot would freeze a resource's state, for example the value, while a navigation happens. Once the navigation succeeds, the underlying value is exposed, and if the navigation is cancelled, the frozen value would still be there during rollback recovery.&lt;/p&gt;

&lt;p&gt;Imagine the following use case. A resource has a router parameter as its own parameter. That could be a product id which loads a product by id. If the user stays on the same component but navigates to a different product id, the resource would immediately change its state and the UI would change while the navigation happens. That could cause flickering effects, especially if the navigation gets cancelled via a guard and the product id changes back to its initial value.&lt;/p&gt;

&lt;p&gt;With the introduced router resource behavior, that is not going to happen. Again, the PR's description explicitly states that this is not currently exposed for public use, but it is very likely the start to get resources and the router together.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/angular/angular/pull/69490" rel="noopener noreferrer"&gt;Angular PR #69490: Create transactional router resource&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Micro-Frontends
&lt;/h2&gt;

&lt;p&gt;In other news, going with Micro-Frontends is an architectural need which we find very often in enterprises. Although they are not an Angular framework feature, there are two common community solutions in the form of Native Federation and Module Federation.&lt;/p&gt;

&lt;p&gt;The main distinction in Angular is that Native Federation works with esbuild, so the modern Angular builder, and Module Federation traditionally works with the old webpack builder or alternative builders such as Rspack.&lt;/p&gt;

&lt;p&gt;Native Federation is maintained by Angular Architects, and Module Federation support in Nx has been common for Angular workspaces. In the release blog for Nx 23, Nx now recommends &lt;code&gt;@angular-architects/native-federation&lt;/code&gt; for Angular and deprecates the older Nx-specific Module Federation generators and executors.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://nx.dev/blog/nx-23-release#module-federation-aligned-with-upstream" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnx.dev%2Fblog%2Fimages%2Farticles%2F_generated%2Fnx-23-release.png" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://nx.dev/blog/nx-23-release#module-federation-aligned-with-upstream" rel="noopener noreferrer" class="c-link"&gt;
            Nx 23: 4x Faster Nx Agents, Agentic Nx Migrate, improved targetDefaults, .Net GA | Nx Blog
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Nx 23 brings a smarter multi-major nx migrate, performance wins across the local engine and Nx Cloud agents, native Node.js TypeScript stripping and V8 compile cache on by default, more precise target configuration, and a big cleanup of deprecated generators, executors, and APIs.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnx.dev%2Ffavicon%2Ffavicon.svg" width="32" height="32"&gt;
          nx.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>angular</category>
      <category>webdev</category>
      <category>frontend</category>
      <category>programming</category>
    </item>
    <item>
      <title>Ng-News 26/16: OpenNG Foundation, spartan/ui</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Thu, 02 Jul 2026 21:47:45 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2616-openng-foundation-spartanui-1aim</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2616-openng-foundation-spartanui-1aim</guid>
      <description>&lt;p&gt;OpenNG Foundation and spartan/ui 1.0 are the headline topics this week: a new home for libraries like Spectator and Elf, and spartan/ui, a stable shadcn-inspired component library for Angular.&lt;/p&gt;

&lt;p&gt;Also in brief: Storybook's Angular modernization through AnalogJS, the end of ng-conf, and AI Dev Craft in Las Vegas.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/IEaeS_4eHKo"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  OpenNG Foundation
&lt;/h2&gt;

&lt;p&gt;Maintaining open-source libraries is hard work. Developers often do it in their spare time, committing to years of maintenance, adding new features, and responding to user requests.&lt;/p&gt;

&lt;p&gt;Last episode, we reported that the ngneat organization was taken down for unknown reasons. While we still don't know why it happened, a new home has emerged for its popular libraries like Spectator and Elf: the OpenNG Foundation.&lt;/p&gt;

&lt;p&gt;Gerome Grignon, known for CanIUseAngular and as the organizer of Ng-Baguette, announced the foundation, which is already hosting these libraries. Alongside Gerome, the current OpenNG team also includes Dominic Bachmann, organizer of Angular Lucerne and author of the angular-typed-router library.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://github.com/openng-foundation" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F294824923%3Fs%3D280%26v%3D4" height="280" class="m-0" width="280"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://github.com/openng-foundation" rel="noopener noreferrer" class="c-link"&gt;
            OpenNG Foundation · GitHub
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            OpenNG Foundation has 8 repositories available. Follow their code on GitHub.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.githubassets.com%2Ffavicons%2Ffavicon.svg" width="32" height="32"&gt;
          github.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  spartan/ui 1.0
&lt;/h2&gt;

&lt;p&gt;spartan/ui has officially released its 1.0 version. It provides an "accessible, production-ready library of more than 55 components" with fully customizable styling.&lt;/p&gt;

&lt;p&gt;After debuting in August 2023 with 30 primitives, it now reaches stable in 2026 with a modern architecture built around signals, standalone components, zoneless change detection, and SSR. Originally initiated by Robin Götz, a full team quickly formed around the project.&lt;/p&gt;

&lt;p&gt;spartan/ui can be seen as the Angular equivalent to shadcn/ui, famous for its customizability. While similar open-source alternatives exist, spartan/ui was the pioneer and has a proven track record of active maintenance over the years.&lt;/p&gt;


&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o" class="crayons-story__hidden-navigation-link"&gt;Announcing spartan/ui 1.0&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;
          &lt;a class="crayons-logo crayons-logo--l" href="/playfulprogramming-angular"&gt;
            &lt;img alt="Playful Programming Angular logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F3316%2F612534f5-7bba-4bfe-8455-998219bc57cf.png" class="crayons-logo__image" width="800" height="800"&gt;
          &lt;/a&gt;

          &lt;a href="/goetzrobin" class="crayons-avatar  crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F961549%2F3c98ffe5-8d8b-4db1-827a-de8c63c25444.jpeg" alt="goetzrobin profile" class="crayons-avatar__image" width="460" height="460"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/goetzrobin" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Robin Goetz
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Robin Goetz
                
              
              &lt;div id="story-author-preview-content-3974106" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/goetzrobin" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F961549%2F3c98ffe5-8d8b-4db1-827a-de8c63c25444.jpeg" class="crayons-avatar__image" alt="" width="460" height="460"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Robin Goetz&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

            &lt;span&gt;
              &lt;span class="crayons-story__tertiary fw-normal"&gt; for &lt;/span&gt;&lt;a href="/playfulprogramming-angular" class="crayons-story__secondary fw-medium"&gt;Playful Programming Angular&lt;/a&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jun 24&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o" id="article-link-3974106"&gt;
          Announcing spartan/ui 1.0
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/angular"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;angular&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;8&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            3 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;h2&gt;
  
  
  AnalogJS in Storybook
&lt;/h2&gt;

&lt;p&gt;Storybook’s Angular integration is getting a modernization, and it is all thanks to AnalogJS.&lt;/p&gt;

&lt;p&gt;While modern versions of the Angular CLI use Vite under the hood as a development server, it remains a "black box." The Angular CLI is still the one managing the compilation. Because the CLI itself is not a Vite plugin, it cannot be easily plugged into other modern tools.&lt;/p&gt;

&lt;p&gt;And that's the issue for Storybook, Vitest, but also others. They are designed to support any framework that presents itself as a Vite plugin.&lt;/p&gt;

&lt;p&gt;AnalogJS, founded and maintained by Brandon Roberts, solves this by doing exactly that. It fully decouples Angular from the CLI's build pipeline and exposes it as a standard Vite plugin. Just activate it, and these modern tools can suddenly compile and serve Angular components out of the box without any Angular-specific configuration. It just works.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-2067695792106705118-982" src="https://platform.twitter.com/embed/Tweet.html?id=2067695792106705118"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-2067695792106705118-982');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2067695792106705118&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;h2&gt;
  
  
  ng-conf is ending
&lt;/h2&gt;

&lt;p&gt;ng-conf is ending.&lt;/p&gt;

&lt;p&gt;ng-conf was the first Angular conference, going back to 2014 with AngularJS, and it continued through to the modern Angular era all the way through 2025. This also means that there is no US-based Angular conference anymore.&lt;/p&gt;

&lt;p&gt;In its place, a new conference called AI Dev Craft will debut in October in Las Vegas, with a call for speakers open.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-2071616309742453054-891" src="https://platform.twitter.com/embed/Tweet.html?id=2071616309742453054"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-2071616309742453054-891');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2071616309742453054&amp;amp;theme=dark"
  }



&lt;/p&gt;

</description>
      <category>angular</category>
      <category>webdev</category>
      <category>frontend</category>
      <category>programming</category>
    </item>
    <item>
      <title>Announcing spartan/ui 1.0</title>
      <dc:creator>Robin Goetz</dc:creator>
      <pubDate>Wed, 24 Jun 2026 00:24:58 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o</link>
      <guid>https://dev.to/playfulprogramming-angular/announcing-spartanui-10-546o</guid>
      <description>&lt;p&gt;After a long and deliberate alpha, spartan/ui is now &lt;strong&gt;1.0&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;We shipped the first 30 primitives in August 2023 with a simple bet: building accessible, good-looking UI in Angular is harder than it should be, and the community deserved a better starting point. Almost three years later, that bet has grown into a stable, production-ready library of more than 55 components - built on signals, ready for zoneless, and server-side-rendering compatible out of the box.&lt;/p&gt;

&lt;p&gt;Here's what 1.0 actually means.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stable, and ready to build on
&lt;/h2&gt;

&lt;p&gt;We stayed in alpha for a long time on purpose. It let us refine the APIs in the open, with real applications putting real pressure on the design, instead of freezing a v1 we'd regret six months later.&lt;/p&gt;

&lt;p&gt;That patience is what 1.0 cashes in. The APIs are now stable and semantically versioned, so you can depend on &lt;code&gt;spartan/ui/brain&lt;/code&gt; and upgrade with confidence. The copy-in &lt;code&gt;spartan/ui/helm&lt;/code&gt; layer stays exactly as it's always been - yours to own, read, and customize. No black boxes, no fighting the library to change a style.&lt;/p&gt;

&lt;h2&gt;
  
  
  Built for modern Angular
&lt;/h2&gt;

&lt;p&gt;Every primitive is built on Angular signals and standalone components. spartan is zoneless-ready and SSR compatible out of the box, so it drops cleanly into how Angular apps are actually written today - no extra setup, no adapters.&lt;/p&gt;

&lt;p&gt;The split that's defined spartan from day one still holds. &lt;code&gt;spartan/ui/brain&lt;/code&gt; carries the hard, unglamorous parts - ARIA, keyboard navigation, focus management - and keeps them maintained so you don't have to. &lt;code&gt;spartan/ui/helm&lt;/code&gt; gives you full styling control on top, copied into your project like a recipe. Accessibility you can rely on; appearance you fully own.&lt;/p&gt;

&lt;h2&gt;
  
  
  From 30 primitives to 55+
&lt;/h2&gt;

&lt;p&gt;The alpha shipped with 30 components. 1.0 ships with more than 55 - nearly double - including many of the most-requested additions over the past two years:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Data Table&lt;/strong&gt; - sorting, filtering, and selection, the piece people asked for most&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sidebar&lt;/strong&gt; - composable app navigation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Calendar&lt;/strong&gt; and &lt;strong&gt;Date Picker&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Carousel&lt;/strong&gt;, &lt;strong&gt;Autocomplete&lt;/strong&gt;, &lt;strong&gt;Pagination&lt;/strong&gt;, and &lt;strong&gt;Breadcrumb&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And we added &lt;strong&gt;Blocks&lt;/strong&gt;: ready-made, fully responsive layouts assembled from spartan components - authentication pages, sidebar layouts, and multi-step steppers you can drop in and adapt. Less scaffolding, more shipping.&lt;/p&gt;

&lt;p&gt;You can browse the &lt;a href="https://spartan.ng/components" rel="noopener noreferrer"&gt;full component set&lt;/a&gt; and the &lt;a href="https://spartan.ng/blocks" rel="noopener noreferrer"&gt;blocks&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  This was built by a community
&lt;/h2&gt;

&lt;p&gt;I want to be clear about something: spartan/ui is not a one-person project, and 1.0 least of all. It exists because a group of people kept showing up - reviewing PRs, building components, fixing the edge cases nobody sees, and arguing about API design until we got it right.&lt;/p&gt;

&lt;p&gt;A huge thank you to the people who carried the heaviest load getting us here - &lt;strong&gt;Merlin&lt;/strong&gt; (&lt;a href="https://github.com/MerlinMoos" rel="noopener noreferrer"&gt;@MerlinMoos&lt;/a&gt;), &lt;strong&gt;Marc&lt;/strong&gt; (&lt;a href="https://github.com/marcjulian" rel="noopener noreferrer"&gt;@marcjulian&lt;/a&gt;), &lt;strong&gt;Ashley&lt;/strong&gt; (&lt;a href="https://github.com/ashley-hunter" rel="noopener noreferrer"&gt;@ashley-hunter&lt;/a&gt;), &lt;strong&gt;Sammy&lt;/strong&gt; (&lt;a href="https://github.com/thatsamsonkid" rel="noopener noreferrer"&gt;@thatsamsonkid&lt;/a&gt;), &lt;strong&gt;Benni&lt;/strong&gt; (&lt;a href="https://github.com/elite-benni" rel="noopener noreferrer"&gt;@elite-benni&lt;/a&gt;), and &lt;strong&gt;Toni&lt;/strong&gt; (&lt;a href="https://github.com/toniskobic" rel="noopener noreferrer"&gt;@toniskobic&lt;/a&gt;) - and to every single person who has opened an issue, sent a PR, answered a question in Discord, or sponsored the work. There are too many of you to name, and that's exactly the point. spartan is what it is because of you.&lt;/p&gt;

&lt;p&gt;If you've contributed and want to say hi or get more involved, the door is open in &lt;a href="https://discord.gg/EqHnxQ4uQr" rel="noopener noreferrer"&gt;Discord&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Powered by Zerops
&lt;/h2&gt;

&lt;p&gt;spartan's development infrastructure runs on &lt;a href="https://zerops.io" rel="noopener noreferrer"&gt;Zerops&lt;/a&gt;, and has for a long time. Preview environments, the docs and demo site, the day-to-day plumbing that makes maintaining an open-source library of this size sustainable - Zerops powers all of it. Their support is a real reason we were able to keep iterating in the open without the infrastructure becoming a tax on the team. Thank you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Get started
&lt;/h2&gt;

&lt;p&gt;There's never been a better time to start.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://spartan.ng/documentation/installation" rel="noopener noreferrer"&gt;Get started with spartan/ui →&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;spartan is MIT-licensed and built in the open. If it saves you time, consider &lt;a href="https://github.com/sponsors/goetzrobin" rel="noopener noreferrer"&gt;sponsoring its development&lt;/a&gt; - sponsorships fund ongoing maintenance, new components, and keeping spartan free for the whole Angular community.&lt;/p&gt;

&lt;p&gt;Here's to 1.0 - and to everything we build on top of it next.&lt;/p&gt;

</description>
      <category>angular</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Ng-News 26/15: Angular 22</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Tue, 23 Jun 2026 19:13:29 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2615-angular-22-23o0</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2615-angular-22-23o0</guid>
      <description>&lt;p&gt;&lt;strong&gt;Angular 22 stable resources and Signal Forms&lt;/strong&gt; are the headline topics, together with new dependency injection APIs such as &lt;strong&gt;&lt;code&gt;@Service&lt;/code&gt; and &lt;code&gt;injectAsync&lt;/code&gt;&lt;/strong&gt;. Also in brief: &lt;code&gt;debounced()&lt;/code&gt;, Vitest migration support, &lt;code&gt;ChangeDetectionStrategy.Eager&lt;/code&gt;, WebMCP, community write-ups, and the ng-neat recovery.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/kINhenbOe00"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Stable resources and Signal Forms
&lt;/h2&gt;

&lt;p&gt;Angular 22 is out. Probably the most outstanding feature is the stabilization of the resource and the Signal Forms. There's much more but let's start with these two.&lt;/p&gt;

&lt;p&gt;Resources, that are three functions &lt;code&gt;resource()&lt;/code&gt;, &lt;code&gt;rxResource()&lt;/code&gt; and &lt;code&gt;httpResource()&lt;/code&gt;, have been introduced during Angular 19. There were some significant changes in Angular 20, and then in Angular 21 we got the snapshot feature. Resources have been experimental all the time, and after almost 1.5 years, they leave experimental status and become stable.&lt;/p&gt;

&lt;p&gt;Similar story for Signal Forms, but at a just faster pace. They were introduced in 21 and are now also stable, so no developer preview either.&lt;/p&gt;

&lt;p&gt;So in some way, these are features we already knew and some of us were already using quite successfully.&lt;/p&gt;

&lt;p&gt;And let's not forget, also &lt;code&gt;@angular/aria&lt;/code&gt;, the headless design system also became stable.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://blog.angular.dev/announcing-angular-v22-c52bb83a4664" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;blog.angular.dev&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://blog.ninja-squad.com/2026/06/03/what-is-new-angular-22.0" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.ninja-squad.com%2Fimages%2Flogo.svg" height="43" class="m-0" width="183"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://blog.ninja-squad.com/2026/06/03/what-is-new-angular-22.0" rel="noopener noreferrer" class="c-link"&gt;
            What's new in Angular 22.0? - Ninja Squad
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Angular 22.0 is out!
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.ninja-squad.com%2Ffavicon.svg" width="256" height="256"&gt;
          blog.ninja-squad.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  &lt;code&gt;@Service&lt;/code&gt;, &lt;code&gt;injectAsync&lt;/code&gt;, and &lt;code&gt;debounced()&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;But, there are new features as well.&lt;/p&gt;

&lt;p&gt;For one, we have the &lt;code&gt;@Service&lt;/code&gt; decorator. That means it is on one side a shortcut for &lt;code&gt;@Injectable({ providedIn: 'root' })&lt;/code&gt; and on the other prevents using dependency injection via the constructor. Instead of constructor-based DI, you should go with the &lt;code&gt;inject&lt;/code&gt; function and there is a dedicated migration available (&lt;code&gt;ng generate @angular/core:inject&lt;/code&gt;).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Service&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;NewsletterClient&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;httpClient&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;inject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;HttpClient&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;httpClient&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://some.host.com/newsletter/subscribe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;Another feature for dependency injection is the asynchronous injector. So the value returned by &lt;code&gt;injectAsync&lt;/code&gt; is not the service instance itself - you call it when you need the service and await the result. Why do we need it? Well, same thing why we do lazy loading in the router. We only want to load when it is actually needed.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;NewsletterPage&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;newsletterModel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;signal&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;newsletterClient&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;injectAsync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./newsletter-client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;newsletterForm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;newsletterModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;submission&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;newsletterClient&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
          &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;newsletterModel&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;So you won't use &lt;code&gt;injectAsync&lt;/code&gt; when you need the service immediately but more when a user clicks on something or some later events. The service needs to be &lt;code&gt;providedIn: 'root'&lt;/code&gt;. So it's best if you already apply the new &lt;code&gt;@Service&lt;/code&gt; decorator.&lt;/p&gt;



&lt;p&gt;And we have a debounced function. You give it a signal and a debounce time, and you are getting back a resource. Debouncing means, when the signal's value changes, the value in the derived resource would wait for the defined period of time until a new value comes. If that's not the case, then the resource will take on that value, and if not, the debouncing starts again.&lt;/p&gt;

&lt;p&gt;As every Signal has an initial value, the debouncing for the first value doesn't happen.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-debounced&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Value {{ debouncedCounter.value() }}`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;DebouncedPage&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;signal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;debouncedCounter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;debounced&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;600&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;_000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;_500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nf"&gt;effect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`value updated &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;debouncedCounter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;value&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;code&gt;debounced()&lt;/code&gt; is experimental. &lt;code&gt;@Service&lt;/code&gt; and &lt;code&gt;injectAsync&lt;/code&gt; are not.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://angular.love/angular-22-key-features-and-changes" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;angular.love&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://www.angulararchitects.io/en/blog/angular-22-the-most-important-new-features-at-a-glance/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.angulararchitects.io%2Fwp-content%2Fuploads%2F2026%2F06%2Fen.png" height="419" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://www.angulararchitects.io/en/blog/angular-22-the-most-important-new-features-at-a-glance/" rel="noopener noreferrer" class="c-link"&gt;
            Angular 22: The Most Important New Features at a Glance - ANGULARarchitects
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Angular 22 stabilizes the Resource API and Signal Forms, makes OnPush the default change detection strategy, and brings @Service, injectAsync, debounced, as well as numerous template and router improvements. This article shows the relevant updates using concrete examples.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.angulararchitects.io%2Fwp-content%2Fuploads%2F2024%2F01%2Fcropped-2023_Angular_Architects_FavIcon-32x32.png" width="32" height="32"&gt;
          angulararchitects.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Vitest and change detection
&lt;/h2&gt;

&lt;p&gt;In Angular 21, we've received Vitest as the new default testing framework. It was not possible to easily migrate because a lot of us were using &lt;code&gt;fakeAsync&lt;/code&gt; or &lt;code&gt;waitForAsync&lt;/code&gt; to manage asynchronous tasks in tests. With Angular 22, that is possible again, but remember, &lt;code&gt;fakeAsync&lt;/code&gt; and &lt;code&gt;waitForAsync&lt;/code&gt; depend on zone.js. So if you have plans to move to zoneless or are already there, it is not an option.&lt;/p&gt;

&lt;p&gt;If you run &lt;code&gt;ng update&lt;/code&gt;, your components which are not OnPush will get a &lt;code&gt;ChangeDetectionStrategy.Eager&lt;/code&gt;. That's the new alias for the old Default value, because default is not OnPush. Speaking of zoneless, if you want to migrate, staying with zone.js and moving all your components to OnPush as an intermediate step is a good approach.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://blog.angular.dev/announcing-angular-v22-c52bb83a4664" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;blog.angular.dev&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  WebMCP
&lt;/h2&gt;

&lt;p&gt;Also in terms of AI, there is experimental support for WebMCP. That means an agent can connect to your web application and can execute certain tool calls. That means, you in Angular have to expose calls to services with a description and so on, and then if the browser supports it, the agent can call them. So it is not necessary anymore that the browser has to read and interact with the DOM.&lt;/p&gt;

&lt;p&gt;WebMCP is still in development, but we can expect to hear more from it in the future. There is also a feature which sets up forms for WebMCP.&lt;/p&gt;

&lt;h2&gt;
  
  
  Community content
&lt;/h2&gt;

&lt;p&gt;As always, there is a lot of community content out there. We had a release video, a release blog and Mark Thompson, Angular's DevRel, was also guest at the Angular Plus Show.&lt;/p&gt;

&lt;p&gt;For this episode, we additionally used the blogs from Cedric Exbrayat from Ninja Squad, Manfred Steyer from Angular Architects, and Mateusz Stefańczyk from House of Angular.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/h5OJUSS_8IA"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/CnQr8bAYKKY"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://blog.ninja-squad.com/2026/06/03/what-is-new-angular-22.0" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.ninja-squad.com%2Fimages%2Flogo.svg" height="43" class="m-0" width="183"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://blog.ninja-squad.com/2026/06/03/what-is-new-angular-22.0" rel="noopener noreferrer" class="c-link"&gt;
            What's new in Angular 22.0? - Ninja Squad
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Angular 22.0 is out!
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.ninja-squad.com%2Ffavicon.svg" width="256" height="256"&gt;
          blog.ninja-squad.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://angular.love/angular-22-key-features-and-changes" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;angular.love&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://www.angulararchitects.io/en/blog/angular-22-the-most-important-new-features-at-a-glance/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.angulararchitects.io%2Fwp-content%2Fuploads%2F2026%2F06%2Fen.png" height="419" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://www.angulararchitects.io/en/blog/angular-22-the-most-important-new-features-at-a-glance/" rel="noopener noreferrer" class="c-link"&gt;
            Angular 22: The Most Important New Features at a Glance - ANGULARarchitects
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Angular 22 stabilizes the Resource API and Signal Forms, makes OnPush the default change detection strategy, and brings @Service, injectAsync, debounced, as well as numerous template and router improvements. This article shows the relevant updates using concrete examples.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.angulararchitects.io%2Fwp-content%2Fuploads%2F2024%2F01%2Fcropped-2023_Angular_Architects_FavIcon-32x32.png" width="32" height="32"&gt;
          angulararchitects.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  ng-neat GitHub
&lt;/h2&gt;

&lt;p&gt;Last but not least, a very important information. Last weekend, the popular ng-neat organization was removed from GitHub. That contained widely used libraries, like Elf for state management and Spectator for testing. Before that, members of the organization were also removed. At the moment, we don't know why because there was no official communication from the owner.&lt;/p&gt;

&lt;p&gt;What is important though, that most of the libraries have been recovered and found their way back to GitHub under a new organization called ngneat-archive. We will keep you updated on this topic.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.reddit.com/r/angular/comments/1txtp35/" rel="noopener noreferrer"&gt;Reddit thread&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>angular</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Angular Addicts #50: Angular 22, Agentic Angular, Deploying to the Cloud &amp; more</title>
      <dc:creator>Gergely Szerovay</dc:creator>
      <pubDate>Tue, 16 Jun 2026 08:06:43 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/angular-addicts-50-angular-22-agentic-angular-deploying-to-the-cloud-more-43l</link>
      <guid>https://dev.to/playfulprogramming-angular/angular-addicts-50-angular-22-agentic-angular-deploying-to-the-cloud-more-43l</guid>
      <description>&lt;h2&gt;
  
  
  👋Hey fellow Angular Addict
&lt;/h2&gt;

&lt;p&gt;This is the 50th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the &lt;a href="https://www.angularaddicts.com/p/angular-addicts-49-analogjs-25-agentic-angular" rel="noopener noreferrer"&gt;49th&lt;/a&gt;, &lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;48th&lt;/a&gt; and &lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;47th&lt;/a&gt;)&lt;/p&gt;

&lt;h2&gt;
  
  
  📢 Release announcements
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://blog.ninja-squad.com/2026/06/03/what-is-new-angular-22.0" rel="noopener noreferrer"&gt;What's new in Angular 22.0?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/exbrayatcedric/" rel="noopener noreferrer"&gt;Cédric Exbrayat&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  💎Angular Gems of May, 2026
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://medium.com/@davidepassafaro/road-to-angular-22-debounce-signal-74d76eb48384" rel="noopener noreferrer"&gt;Road to Angular 22: Debounce Signal&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/davide-passafaro/" rel="noopener noreferrer"&gt;Davide Passafaro&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://medium.com/@marcomatto/angular-22-embracing-the-signal-first-era-b1c8803acea6" rel="noopener noreferrer"&gt;Angular 22: Embracing the Signal-First Era&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/marcomartorana/" rel="noopener noreferrer"&gt;Marco Martorana&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angulartraining.com/modern-angular-replacing-lifecycle-hooks-with-signals-138d9a51323e" rel="noopener noreferrer"&gt;Modern Angular: Replacing Lifecycle Hooks with Signals&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/achautard/" rel="noopener noreferrer"&gt;Alain Chautard&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://angular.love/beyond-clean-code-building-a-scalable-angular-frontend-architecture-with-nx-monorepos" rel="noopener noreferrer"&gt;Scalable Angular Frontend Architecture with Nx Monorepos&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/prodromouf" rel="noopener noreferrer"&gt;Fanis Prodromou&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/best-llms-for-angular/" rel="noopener noreferrer"&gt;Agentic Engineering: Which LLM Is Best for Angular Development?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/thalhammer/" rel="noopener noreferrer"&gt;Alexander Thalhammer&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://medium.com/@mseemann.io/from-module-federation-to-web-components-the-angular-migration-nobody-warned-me-about-967f180caded" rel="noopener noreferrer"&gt;From Module Federation to Web Components: The Angular Migration Nobody Warned Me About&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By Michael Seemann&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://medium.com/ngconf/my-favorite-ai-tools-for-building-angular-apps-1c367d83f0af" rel="noopener noreferrer"&gt;My Favorite AI Tools for Building Angular Apps&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/pjlamb12/" rel="noopener noreferrer"&gt;Preston Lamb&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/gdg/build-a-streaming-gemini-chat-in-angular-with-signals-then-ship-it-on-cloud-run-1llc"&gt;Build a Streaming Gemini Chat in Angular with Signals — Then Ship It on Cloud Run&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/tomasz-flis/" rel="noopener noreferrer"&gt;Tomasz Flis&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/brandontroberts/deploying-angular-applications-to-cloudflare-with-void-94f"&gt;Deploying Angular applications to Cloudflare with Void&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/brandontroberts/" rel="noopener noreferrer"&gt;Brandon Roberts&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/how-i-made-my-a2ui-dashboard-300-times-faster/" rel="noopener noreferrer"&gt;How I Made My A2UI Dashboard 300 Times Faster&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This article is part of &lt;a href="https://www.linkedin.com/in/manfred-steyer-84645821/" rel="noopener noreferrer"&gt;Manfred Steyer&lt;/a&gt;'s Agentic Angular series:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/understanding-ag-ui-the-standard-for-agentic-user-interfaces/" rel="noopener noreferrer"&gt;Understanding AG-UI: The Standard for Agentic User Interfaces&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/ag-ui-in-practice-the-sdk-for-typescript/" rel="noopener noreferrer"&gt;AG-UI in Practice: The SDK for TypeScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/implementing-ag-ui-with-angular/" rel="noopener noreferrer"&gt;Implementing AG-UI with Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/a2ui-how-ai-generates-dynamic-uis-at-runtime/" rel="noopener noreferrer"&gt;A2UI: How AI Generates Dynamic UIs at Runtime&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/integrating-a2ui-with-ag-ui-in-angular/" rel="noopener noreferrer"&gt;Integrating A2UI with AG-UI in Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/custom-catalogs-in-a2ui-your-own-components-for-ai-generated-uis/" rel="noopener noreferrer"&gt;Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  👨‍💻About the author
&lt;/h2&gt;

&lt;p&gt;My name is &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;Gergely Szerovay&lt;/a&gt;, 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 &lt;a href="https://angularaddicts.com/" rel="noopener noreferrer"&gt;Angular Addicts&lt;/a&gt; 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! &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Subscribe here&lt;/a&gt; 🔥&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Substack (Angular Addicts)&lt;/a&gt;, &lt;a href="https://aiboosted.dev" rel="noopener noreferrer"&gt;Substack (AIBoosted.dev)&lt;/a&gt;, &lt;a href="https://medium.com/@GergelySzerovay" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;, &lt;a href="https://dev.to/gergelyszerovay"&gt;Dev.to&lt;/a&gt;, &lt;a href="https://twitter.com/GergelySzerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!&lt;/p&gt;

&lt;h2&gt;
  
  
  🕹️Previous issues
&lt;/h2&gt;

&lt;p&gt;If you missed the previous issues of the newsletter, you can read them &lt;a href="https://www.angularaddicts.com/t/angular-addicts-monthly" rel="noopener noreferrer"&gt;here&lt;/a&gt;, these are the latest 3 issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-49-analogjs-25-agentic-angular" rel="noopener noreferrer"&gt;Angular Addicts #49: AnalogJS 2.5, Agentic Angular &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;Angular Addicts #48: TypeScript 6, OnPush as default, AI tools &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;Angular Addicts #47: Angular 21.2, Skills, Signal Forms &amp;amp; moree&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  📨 Submit your Angular resource
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://twitter.com/gergelyszerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;! I might feature it in the next Angular Addicts issue!&lt;/p&gt;

</description>
      <category>angular</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Ng-News 26/14: linkedSignal Write-Back, Error Boundaries</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Tue, 02 Jun 2026 20:55:34 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2614-linkedsignal-write-back-error-boundaries-5ghb</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2614-linkedsignal-write-back-error-boundaries-5ghb</guid>
      <description>&lt;p&gt;&lt;strong&gt;Angular 22 stabilization&lt;/strong&gt; (resources, Signal Forms, &lt;code&gt;@angular/aria&lt;/code&gt;) and &lt;strong&gt;compiler ABI stability across patch versions&lt;/strong&gt; for micro frontends are the headline items this week. Also in brief: &lt;code&gt;linkedSignal&lt;/code&gt;'s &lt;code&gt;set&lt;/code&gt; option and NgRx's reverted &lt;code&gt;delegatedSignal&lt;/code&gt;, plus error boundaries from Google I/O.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/oIOOgVgN53w"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Angular 22 stabilization
&lt;/h2&gt;

&lt;p&gt;The release of Angular 22 is getting closer, and we are also getting more and more information about the changes but also what awaits us beyond Angular 22.&lt;/p&gt;

&lt;p&gt;We already know that Angular 22 will make a lot of features stable. That is resources, Signal Forms, but also &lt;code&gt;@angular/aria&lt;/code&gt;. Stable means no breaking changes within majors.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://angular.dev/reference/releases" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangular.dev%2Fassets%2Fimages%2Fng-image.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://angular.dev/reference/releases" rel="noopener noreferrer" class="c-link"&gt;
            Versioning and releases • Angular
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            The web development framework for building modern apps.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangular.dev%2Fassets%2Ficons%2Ffavicon-48x48.png" width="48" height="48"&gt;
          angular.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Compiler ABI and micro frontends
&lt;/h2&gt;

&lt;p&gt;Another feature was announced, and it will be a happy message for anyone who's using micro frontends via Native Federation or Module Federation. Until now, whenever you loaded another Angular application/micro frontend during runtime, you had to make sure that it has been compiled with exactly the same version as the host application.&lt;/p&gt;

&lt;p&gt;Why? Because the compiled Angular code was never part of the public API and didn't follow semantic versioning, which means the Angular team could introduce breaking changes within patch versions.&lt;/p&gt;

&lt;p&gt;That is going to change. Breaking changes within a major can still happen in minors, but not in patch versions.&lt;/p&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/angular/angular/pull/68623" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        docs: establish compiler abi stability across patch versions
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#68623&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/alxhub" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F4175141%3Fv%3D4" alt="alxhub avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/alxhub" rel="noopener noreferrer"&gt;alxhub&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/angular/angular/pull/68623" rel="noopener noreferrer"&gt;&lt;time&gt;May 07, 2026&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;Define the new policy that the compiler ABI (the internal runtime APIs called by compiler-generated code) is stable across patch versions within the same minor version. This update unblocks microfrontend use cases and safer sharing of the Angular runtime across independent builds.&lt;/p&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/angular/angular/pull/68623" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  linkedSignal &lt;code&gt;set&lt;/code&gt; and delegatedSignal
&lt;/h2&gt;

&lt;p&gt;In former episodes, we've already touched upon the need for a new Signal type, which is like &lt;code&gt;linkedSignal&lt;/code&gt;, that derives the value from another Signal, but is not writable. At the same time though, it should be possible to have an option to write back to the original Signal.&lt;/p&gt;

&lt;p&gt;That feature exists already for Signal Forms under the name &lt;code&gt;DeepSignal&lt;/code&gt;, but it is only internal. And because there is a need for it for us as well, NgRx, a state management library, was about to introduce that as &lt;code&gt;delegatedSignal&lt;/code&gt; in NgRx 22, but it is not going to happen and the existing commit was reverted.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;linkedSignal&lt;/code&gt; itself will get a &lt;code&gt;set&lt;/code&gt; option, which allows you to write back to the original Signal. So in some way what the &lt;code&gt;delegatedSignal&lt;/code&gt; would have done will be part of the &lt;code&gt;linkedSignal&lt;/code&gt; itself.&lt;/p&gt;

&lt;p&gt;The PR has a label for minor version, which means Angular 22.1. Last summer, the difference between 20.0 and 20.1 was around 6 weeks. Given that Angular 22 will be released in the week of June 3rd, that means we are looking at a release of mid-July.&lt;/p&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/angular/angular/pull/68708" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        feat(core): add custom set option to linkedSignal
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#68708&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/alxhub" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F4175141%3Fv%3D4" alt="alxhub avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/alxhub" rel="noopener noreferrer"&gt;alxhub&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/angular/angular/pull/68708" rel="noopener noreferrer"&gt;&lt;time&gt;May 13, 2026&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;Introduce a custom &lt;code&gt;set&lt;/code&gt; option in &lt;code&gt;linkedSignal&lt;/code&gt; options to allow overriding and customizing the default write-back behavior of writable signals. This lets developers route updates back to the source of truth (e.g., converting Fahrenheit back to Celsius) or perform other side effects like updating properties inside a parent signal.&lt;/p&gt;
&lt;p&gt;Additionally, the custom callback receives the standard signal setter as its second parameter (&lt;code&gt;rawSet&lt;/code&gt;) to allow direct internal mutation if desired.&lt;/p&gt;
&lt;p&gt;TAG=agy
CONV=addbb5c4-4233-49e8-b844-6f732d7d5c72&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;PR Checklist&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Please check if your PR fulfills the following requirements:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;[ ] The commit message follows our guidelines: &lt;a href="https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md" rel="noopener noreferrer"&gt;https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;[ ] Tests for the changes have been added (for bug fixes / features)&lt;/li&gt;
&lt;li&gt;[ ] Docs have been added / updated (for bug fixes / features)&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;PR Type&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;What kind of change does this PR introduce?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Bugfix&lt;/li&gt;
&lt;li&gt;[ ] Feature&lt;/li&gt;
&lt;li&gt;[ ] Code style update (formatting, local variables)&lt;/li&gt;
&lt;li&gt;[ ] Refactoring (no functional changes, no api changes)&lt;/li&gt;
&lt;li&gt;[ ] Build related changes&lt;/li&gt;
&lt;li&gt;[ ] CI related changes&lt;/li&gt;
&lt;li&gt;[ ] Documentation content changes&lt;/li&gt;
&lt;li&gt;[ ] angular.dev application / infrastructure changes&lt;/li&gt;
&lt;li&gt;[ ] Other... Please describe:&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What is the current behavior?&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;p&gt;Issue Number: N/A&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What is the new behavior?&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Does this PR introduce a breaking change?&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;[ ] Yes&lt;/li&gt;
&lt;li&gt;[ ] No&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Other information&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/angular/angular/pull/68708" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;a href="https://github.com/ngrx/platform/pull/5157" rel="noopener noreferrer"&gt;ngrx/platform#5157 — revert delegatedSignal (Angular linkedSignal &lt;code&gt;set&lt;/code&gt; planned)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/ng-news/ng-news-26-11-typescript-6-ngrx-rfcs-delegatedsignal-resource-extensions-b953f0d3cc29" rel="noopener noreferrer"&gt;Ng-News 26/11: TypeScript 6, NgRx RFCs, delegatedSignal&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Google I/O: error boundaries
&lt;/h2&gt;

&lt;p&gt;Google's conference Google I/O also took place, and Mark Thompson, Angular DevRel, gave a talk where, among other things, he introduced an upcoming feature which is called error boundaries.&lt;/p&gt;

&lt;p&gt;You can see it as an elegant try/catch block for the template. Similar to &lt;code&gt;@defer&lt;/code&gt; you wrap parts of the template into &lt;code&gt;@boundary&lt;/code&gt; and if an error occurs, the boundary will catch it and display a fallback. Mark also mentioned that there could be an option to define retry logic for the boundary.&lt;/p&gt;

&lt;p&gt;That will also improve the DX with resources, which throw the error if you access its value.&lt;/p&gt;

&lt;p&gt;It was the first time that we heard about this feature publicly. Mark said that they plan to make it available as developer preview in Q3 this year, which probably means Angular 23.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/MbkjTNg2rcg"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>angular</category>
      <category>programming</category>
      <category>webdev</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Angular Addicts #49: AnalogJS 2.5, Agentic Angular &amp; more</title>
      <dc:creator>Gergely Szerovay</dc:creator>
      <pubDate>Tue, 12 May 2026 07:11:31 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/angular-addicts-49-analogjs-25-agentic-angular-more-1pj8</link>
      <guid>https://dev.to/playfulprogramming-angular/angular-addicts-49-analogjs-25-agentic-angular-more-1pj8</guid>
      <description>&lt;h2&gt;
  
  
  👋Hey fellow Angular Addict
&lt;/h2&gt;

&lt;p&gt;This is the 49th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the &lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;48th&lt;/a&gt;, &lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;47th&lt;/a&gt; and &lt;a href="https://www.angularaddicts.com/p/angular-addicts-46-skills-signal-forms" rel="noopener noreferrer"&gt;46th&lt;/a&gt;)&lt;/p&gt;

&lt;h2&gt;
  
  
  📢 Release announcements
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://dev.to/analogjs/analogjs-25-runtime-i18n-fast-compilation-mode-hierarchical-content-and-more-3ocj"&gt;AnalogJS 2.5: Runtime i18n, Fast Compilation Mode, Hierarchical Content, and more!&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/brandontroberts/" rel="noopener noreferrer"&gt;Brandon Roberts&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  💎Angular Gems of April, 2026
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://riegler.fr/blog/2025-04-05-input-output" rel="noopener noreferrer"&gt;Asymmetry of Angular Inputs and Outputs&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/matthieuriegler/" rel="noopener noreferrer"&gt;Matthieu Riegler&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/migrate-from-karma-to-vitest/" rel="noopener noreferrer"&gt;Migrate from Karma To Vitest&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/marcellkiss" rel="noopener noreferrer"&gt;Marcell Kiss&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://angular.love/ai-agents-for-developers-which-tool-works-best-in-real-projects" rel="noopener noreferrer"&gt;AI Agents for Developers: Which Tool Works Best in Real Projects?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/maja-hendzel-433126215/" rel="noopener noreferrer"&gt;Maja Hendzel&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angular.dev/back-from-baby-bonding-agents-building-blocks-and-the-future-of-ai-engineering-07c0afb816a3" rel="noopener noreferrer"&gt;Back from Baby Bonding: Agents, Building Blocks, and the Future of AI Engineering&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/devinchasanoff/" rel="noopener noreferrer"&gt;Devin Chasanoff&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/gde/extending-a-video-with-angular-veo-31-lite-firebase-cloud-functions-and-firebase-cloud-storage-4ik9"&gt;Extending a Video with Angular, Veo 3.1 Lite, Firebase Cloud Functions, and Firebase Cloud Storage&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/connieleung107/" rel="noopener noreferrer"&gt;Connie Leung&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/custom-catalogs-in-a2ui-your-own-components-for-ai-generated-uis/" rel="noopener noreferrer"&gt;Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This article is part of &lt;a href="https://www.linkedin.com/in/manfred-steyer-84645821/" rel="noopener noreferrer"&gt;Manfred Steyer&lt;/a&gt;'s Agentic Angular series:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/understanding-ag-ui-the-standard-for-agentic-user-interfaces/" rel="noopener noreferrer"&gt;Understanding AG-UI: The Standard for Agentic User Interfaces&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/ag-ui-in-practice-the-sdk-for-typescript/" rel="noopener noreferrer"&gt;AG-UI in Practice: The SDK for TypeScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/implementing-ag-ui-with-angular/" rel="noopener noreferrer"&gt;Implementing AG-UI with Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/a2ui-how-ai-generates-dynamic-uis-at-runtime/" rel="noopener noreferrer"&gt;A2UI: How AI Generates Dynamic UIs at Runtime&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/integrating-a2ui-with-ag-ui-in-angular/" rel="noopener noreferrer"&gt;Integrating A2UI with AG-UI in Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angulararchitects.io/en/blog/custom-catalogs-in-a2ui-your-own-components-for-ai-generated-uis/" rel="noopener noreferrer"&gt;Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angulartraining.com/rxjs-to-angular-signals-patterns-pitfalls-and-practical-tips-f551b100b9ec" rel="noopener noreferrer"&gt;RxJS to Angular Signals: Patterns, Pitfalls, and Practical Tips&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/achautard/" rel="noopener noreferrer"&gt;Alain Chautard&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  👨‍💻About the author
&lt;/h2&gt;

&lt;p&gt;My name is &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;Gergely Szerovay&lt;/a&gt;, 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 &lt;a href="https://angularaddicts.com/" rel="noopener noreferrer"&gt;Angular Addicts&lt;/a&gt; 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! &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Subscribe here&lt;/a&gt; 🔥&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Substack (Angular Addicts)&lt;/a&gt;, &lt;a href="https://aiboosted.dev" rel="noopener noreferrer"&gt;Substack (AIBoosted.dev)&lt;/a&gt;, &lt;a href="https://medium.com/@GergelySzerovay" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;, &lt;a href="https://dev.to/gergelyszerovay"&gt;Dev.to&lt;/a&gt;, &lt;a href="https://twitter.com/GergelySzerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!&lt;/p&gt;

&lt;h2&gt;
  
  
  🕹️Previous issues
&lt;/h2&gt;

&lt;p&gt;If you missed the previous issues of the newsletter, you can read them &lt;a href="https://www.angularaddicts.com/t/angular-addicts-monthly" rel="noopener noreferrer"&gt;here&lt;/a&gt;, these are the latest 3 issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-48-typescript-6-on-push-as-default" rel="noopener noreferrer"&gt;Angular Addicts #48: TypeScript 6, OnPush as default, AI tools &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;Angular Addicts #47: Angular 21.2, Skills, Signal Forms &amp;amp; moree&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-46-skills-signal-forms" rel="noopener noreferrer"&gt;Angular Addicts #46: Angular 21.1, Skills, Signal Forms &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  📨 Submit your Angular resource
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://twitter.com/gergelyszerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;! I might feature it in the next Angular Addicts issue!&lt;/p&gt;

</description>
      <category>angular</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Ng-News 26/13: @Service, Native Federation, Angular Feature Lifecycles</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Tue, 05 May 2026 18:13:29 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2613-service-native-federation-angular-feature-lifecycles-1g5f</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2613-service-native-federation-angular-feature-lifecycles-1g5f</guid>
      <description>&lt;p&gt;Angular 22's proposed &lt;strong&gt;&lt;code&gt;@Service&lt;/code&gt; decorator&lt;/strong&gt; and the likely stabilization of the &lt;strong&gt;resource API family&lt;/strong&gt;. Also in brief: Angular feature lifecycle stages, Native Federation v4 changes, and fresh Oxc Angular compiler benchmark context.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/MbkWoQvyMdo"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Angular 22 preview: &lt;code&gt;@Service&lt;/code&gt; and resource APIs
&lt;/h2&gt;

&lt;p&gt;The release of Angular 22 comes closer, and we are also getting more and more information about the changes.&lt;/p&gt;

&lt;p&gt;For example, we will get a new decorator for services, which will also be called &lt;code&gt;@Service&lt;/code&gt;. What's the difference compared with the existing &lt;code&gt;@Injectable&lt;/code&gt; decorator?&lt;/p&gt;

&lt;p&gt;By default, &lt;code&gt;@Service&lt;/code&gt; will automatically provide the service in root, and you cannot use constructor-based dependency injection anymore, but have to go via the &lt;code&gt;inject&lt;/code&gt; function.&lt;/p&gt;

&lt;p&gt;And another PR, which is still open, says the resource family, including &lt;code&gt;httpResource&lt;/code&gt;, but also &lt;code&gt;rxResource&lt;/code&gt;, will leave the experimental stage and become stable. So the developer preview gets skipped. One also has to say that we have had the resource APIs for almost 1.5 years now, so it is more than time.&lt;/p&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/angular/angular/pull/68195" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        feat(core): introduce @Service decorator
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#68195&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/crisbeto" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F4450522%3Fv%3D4" alt="crisbeto avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/crisbeto" rel="noopener noreferrer"&gt;crisbeto&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/angular/angular/pull/68195" rel="noopener noreferrer"&gt;&lt;time&gt;Apr 14, 2026&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;These changes introduce the new &lt;code&gt;@Service&lt;/code&gt; decorator which is a more ergonomic alternative to &lt;code&gt;@Injectable&lt;/code&gt;. The reason we're adding a new decorator is that &lt;code&gt;@Injectable&lt;/code&gt; has been around since the beginning of Angular and it has a lot of baggage that adds unnecessary overhead for users that generally want to define a singleton service, available in their entire app. The key differences between &lt;code&gt;@Service&lt;/code&gt; and &lt;code&gt;@Injectable&lt;/code&gt; are:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;@Service&lt;/code&gt; is &lt;code&gt;providedIn: 'root'&lt;/code&gt; by default. You can opt into providing the service yourself by setting &lt;code&gt;autoProvided: false&lt;/code&gt; on it.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;@Service&lt;/code&gt; doesn't allow constructor-based injection, only the &lt;code&gt;inject&lt;/code&gt; function.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;@Service&lt;/code&gt; doesn't support the complex type signature of &lt;code&gt;@Injectable&lt;/code&gt; (&lt;code&gt;useClass&lt;/code&gt;, &lt;code&gt;useValue&lt;/code&gt; etc.). Instead it supports a single &lt;code&gt;factory&lt;/code&gt; function.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Example:&lt;/p&gt;
&lt;div class="highlight highlight-source-ts js-code-highlight"&gt;
&lt;pre&gt;&lt;span class="pl-k"&gt;import&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt;&lt;span class="pl-v"&gt;Service&lt;/span&gt;&lt;span class="pl-kos"&gt;}&lt;/span&gt; &lt;span class="pl-k"&gt;from&lt;/span&gt; &lt;span class="pl-s"&gt;'@angular/core'&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;
&lt;span class="pl-k"&gt;import&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt;&lt;span class="pl-v"&gt;HttpClient&lt;/span&gt;&lt;span class="pl-kos"&gt;}&lt;/span&gt; &lt;span class="pl-k"&gt;from&lt;/span&gt; &lt;span class="pl-s"&gt;'@angular/common/http'&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;
&lt;span class="pl-k"&gt;import&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt;&lt;span class="pl-v"&gt;AuthService&lt;/span&gt;&lt;span class="pl-kos"&gt;}&lt;/span&gt; &lt;span class="pl-k"&gt;from&lt;/span&gt; &lt;span class="pl-s"&gt;'./auth'&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;

@&lt;span class="pl-v"&gt;Service&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;
&lt;span class="pl-k"&gt;export&lt;/span&gt; &lt;span class="pl-k"&gt;class&lt;/span&gt; &lt;span class="pl-smi"&gt;PostService&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt;
  &lt;span class="pl-k"&gt;private&lt;/span&gt; &lt;span class="pl-k"&gt;readonly&lt;/span&gt; &lt;span class="pl-c1"&gt;httpClient&lt;/span&gt; &lt;span class="pl-c1"&gt;=&lt;/span&gt; &lt;span class="pl-en"&gt;inject&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-v"&gt;HttpClient&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;
  &lt;span class="pl-k"&gt;private&lt;/span&gt; &lt;span class="pl-k"&gt;readonly&lt;/span&gt; &lt;span class="pl-c1"&gt;authService&lt;/span&gt; &lt;span class="pl-c1"&gt;=&lt;/span&gt; &lt;span class="pl-en"&gt;inject&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-v"&gt;AuthService&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;

  &lt;span class="pl-en"&gt;getUserPosts&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt;
    &lt;span class="pl-k"&gt;return&lt;/span&gt; &lt;span class="pl-smi"&gt;this&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-c1"&gt;httpClient&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-en"&gt;get&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s"&gt;'/api/posts/'&lt;/span&gt; &lt;span class="pl-c1"&gt;+&lt;/span&gt; &lt;span class="pl-smi"&gt;this&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-c1"&gt;authService&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-c1"&gt;userId&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;
  &lt;span class="pl-kos"&gt;}&lt;/span&gt;
&lt;span class="pl-kos"&gt;}&lt;/span&gt;&lt;/pre&gt;

&lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/angular/angular/pull/68195" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/angular/angular/pull/68253" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        refactor(core): promote `resource`, `rxResource` &amp;amp; `httpResource` to stable
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#68253&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/JeanMeche" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F1300985%3Fv%3D4" alt="JeanMeche avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/JeanMeche" rel="noopener noreferrer"&gt;JeanMeche&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/angular/angular/pull/68253" rel="noopener noreferrer"&gt;&lt;time&gt;Apr 16, 2026&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;The time has come.&lt;/p&gt;
&lt;p&gt;Note: #67382 introduced a breaking change where you could notice some sublte timing change on how &lt;code&gt;value&lt;/code&gt; is set when using &lt;code&gt;rxResource&lt;/code&gt; or a &lt;code&gt;stream&lt;/code&gt; on a &lt;code&gt;resource&lt;/code&gt;&lt;/p&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/angular/angular/pull/68253" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Feature lifecycle stages in Angular
&lt;/h2&gt;

&lt;p&gt;Alejandro Cuba Ruiz wrote on the ng-conf Medium publication about what he calls the five lifecycle stages of an Angular feature: experimental, developer preview, stable, deprecated, and removed. The article is not a secret internal document; it lines up with what we occasionally also hear from the Angular team.&lt;/p&gt;

&lt;p&gt;Experimental means the API can move under minors or patches, so the author argues to keep it out of production and to experiment in isolation. Developer preview is "we like the design, show us real-world pain" - safer than experimental, still not semver-frozen. Stable is the contract: breaking changes belong in majors, with migrations when possible. Deprecated gives you the familiar two-major-version runway, and removed is the point where the code is actually gone.&lt;/p&gt;

&lt;p&gt;He also mentions tooling outside the official docs, for example a "Can I Use Angular Features" grid from Gerome Grignon, which can be handy if you support more than one Angular version.&lt;/p&gt;

&lt;p&gt;Next to experimental, developer preview, and stable, there are also the deprecation and removal stages that Alejandro also covers.&lt;/p&gt;

&lt;p&gt;So quite a sound guide to help you decide if and when you want to use a certain feature.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/ngconf/the-5-lifecycle-stages-of-an-angular-feature-c3ecc5529d53" rel="noopener noreferrer"&gt;The 5 lifecycle stages of an Angular feature&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://angular.dev/reference/releases" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangular.dev%2Fassets%2Fimages%2Fng-image.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://angular.dev/reference/releases" rel="noopener noreferrer" class="c-link"&gt;
            Versioning and releases • Angular
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            The web development framework for building modern apps.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangular.dev%2Fassets%2Ficons%2Ffavicon-48x48.png" width="48" height="48"&gt;
          angular.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Native Federation v4 updates
&lt;/h2&gt;

&lt;p&gt;Native Federation is next to Module Federation one of the most used libraries when it comes to building microfrontends in Angular. Native Federation version 4 was released and brings a bunch of updates, whereas the most visible one is a website with a lot of documentation. The GitHub repository was also moved to a new organization, the code is now split into multiple repositories, and an orchestrator that manages the microfrontends takes or will take over the old runtime.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://native-federation.com/index.html" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnative-federation.com%2Fimages%2Fsujet-dark.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://native-federation.com/index.html" rel="noopener noreferrer" class="c-link"&gt;
            Native Federation — Micro Frontends with Web Standards
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            A browser-native implementation of Module Federation for building Micro Frontends using web standards like ESM and Import Maps.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnative-federation.com%2Fimages%2Ffavicon.png" width="256" height="256"&gt;
          native-federation.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Oxc Angular compiler benchmarks and caveats
&lt;/h2&gt;

&lt;p&gt;In a former episode of ng-news, we've already covered Void Zero's experiments on writing the Angular compiler in the Oxidation Compiler, which is built on Rust.&lt;/p&gt;

&lt;p&gt;There is now an official article where they publish official numbers and also give some background information on their development process, which is of course heavily AI-based.&lt;/p&gt;

&lt;p&gt;They describe on the order of two months of work, mainly with Claude Code and Codex, under the steering of experienced engineers - not "the model wrote a compiler overnight," but agents doing large-scale porting and review work once the architecture and guardrails exist.&lt;/p&gt;

&lt;p&gt;The headline numbers are eye-catching: they report on the order of six times faster compiles than the Angular CLI.&lt;/p&gt;

&lt;p&gt;As always, be careful with those numbers, but they could be reasonable. Especially since they omitted some heavy tasks like template type-checking. They also admit that the non-existing type-check is a significant performance booster.&lt;/p&gt;

&lt;p&gt;The compiler is available as a Vite plugin, &lt;code&gt;@oxc-angular/vite&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;VoidZero also writes that the repository will not be maintained long term. In parallel, they note that the Angular team has its own experiments with Oxc.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://voidzero.dev/posts/oxc-angular-compiler" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fvoidzero.dev%2Fcovers%2Foxc-angular-compiler.jpg" height="402" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://voidzero.dev/posts/oxc-angular-compiler" rel="noopener noreferrer" class="c-link"&gt;
            How we made the Angular Compiler faster using AI | VoidZero
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            How VoidZero built the Oxc Angular Compiler, an AI-powered Angular compiler that achieves up to 20x faster code compiling speed.
          &lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    &amp;lt;div class="color-secondary fs-s flex items-center"&amp;gt;
        &amp;lt;img
          alt="favicon"
          class="c-embed__favicon m-0 mr-2 radius-0"
          src="https://voidzero.dev/favicon.svg"
          loading="lazy" /&amp;gt;
      voidzero.dev
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/voidzero-dev/oxc-angular-compiler" rel="noopener noreferrer"&gt;voidzero-dev/oxc-angular-compiler&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

</description>
      <category>angular</category>
      <category>webdev</category>
      <category>programming</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Angular Addicts #48: TypeScript 6, OnPush as default, AI tools &amp; more</title>
      <dc:creator>Gergely Szerovay</dc:creator>
      <pubDate>Thu, 16 Apr 2026 08:19:10 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/angular-addicts-48-typescript-6-onpush-as-default-ai-tools-more-4h54</link>
      <guid>https://dev.to/playfulprogramming-angular/angular-addicts-48-typescript-6-onpush-as-default-ai-tools-more-4h54</guid>
      <description>&lt;h2&gt;
  
  
  👋Hey fellow Angular Addict
&lt;/h2&gt;

&lt;p&gt;This is the 48th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the &lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;47th&lt;/a&gt;, &lt;a href="https://www.angularaddicts.com/p/angular-addicts-46-skills-signal-forms" rel="noopener noreferrer"&gt;46th&lt;/a&gt; and &lt;a href="https://www.angularaddicts.com/p/angular-addicts-44-angualr-21-signal-forms-vitest" rel="noopener noreferrer"&gt;45th&lt;/a&gt;)&lt;/p&gt;

&lt;h2&gt;
  
  
  📢 Release announcements
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/" rel="noopener noreferrer"&gt;Announcing TypeScript 6.0 - TypeScript&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://twitter.com/drosenwasser" rel="noopener noreferrer"&gt;Daniel Rosenwasser&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://dev.to/analogjs/analogjs-24-vite-8-vitest-snapshot-serializers-astro-v6-support-and-more-3hgo"&gt;AnalogJS 2.4: Vite 8, Vitest Snapshot Serializers, Astro v6 Support, and more!&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/brandontroberts" rel="noopener noreferrer"&gt;Brandon Roberts&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📢 &lt;a href="https://www.reddit.com/r/angular/comments/1rz4uma/signality_01_is_out/" rel="noopener noreferrer"&gt;Signality 0.1 &amp;amp; 0.2 is out&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/vborodin/" rel="noopener noreferrer"&gt;Vyacheslav Borodin&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://signality.dev/" rel="noopener noreferrer"&gt;Signality&lt;/a&gt; is a comprehensive library of signal-first utilities for Angular. SSR-ready, type-safe, and designed for seamless reactive composition with DI-interop.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎫 Win a free ticket to WebExpo Conf (Prague, Czechia, May 27-28, 2026)
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://webexpo.net/" rel="noopener noreferrer"&gt;WebExpo&lt;/a&gt;&amp;nbsp;is a conference for developers, designers and anyone involved in creating digital products and services, now with &lt;a href="https://webexpo.net/blog/fine-tuned-for-your-role-the-ai-thread-running-through-webexpo-2026/" rel="noopener noreferrer"&gt;AI talks in focus&lt;/a&gt; It’s my favorite conference I have ever been to, and just like last year, I’m a community partner of the event, so I can give away one free ticket to my followers!&lt;/p&gt;

&lt;h3&gt;
  
  
  ➡️HOW TO WIN A&amp;nbsp;TICKET?
&lt;/h3&gt;

&lt;p&gt;To participate in the raffle, subscribe to Webexpo's newsletter: &lt;a href="https://webexpo.net/webexpo-newsletter/" rel="noopener noreferrer"&gt;https://webexpo.net/webexpo-newsletter/&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Then please send a screenshot of your subscription to this email address: &lt;a href="mailto:gergely.szerovay+we26@gmail.com"&gt;gergely.szerovay+we26@gmail.com&lt;/a&gt; with the following email subject: “WebExpo Angular Addicts Ticket”, and an answer to the question: "Which speaker are you most excited about?".&lt;/p&gt;

&lt;p&gt;I will accept entries submitted to this email address before 26. April 2026, 23:59 CEST (Sunday).&lt;/p&gt;

&lt;p&gt;Some conditions: the prize is a conference ticket, which provides the winner with access to the program of the conference days. Premium Workshops are not included in the conference ticket. The conference ticket is not transferable to someone else and there is no refund in case the winner doesn't arrive or cancel. Flight tickets or accommodation are not included in the conference ticket.&lt;/p&gt;

&lt;p&gt;So these are the steps:&lt;/p&gt;

&lt;p&gt;1️⃣ Subscribe to Webexpo's newsletter&lt;br&gt;
2️⃣ Send me an email with the screenshot, and an answer to the question: "Which speaker are you most excited about?".&lt;/p&gt;

&lt;p&gt;❗️Please check out the DATE &amp;amp; LOCATION first, and only participate in the contest if you’d surely attend the event! Thanks for your consideration! And please share this opportunity with your friends and network!&lt;/p&gt;

&lt;p&gt;The winner will be randomly selected on 27. April 2026.&lt;br&gt;
I’ll contact the winner via email, GOOD LUCK!&lt;/p&gt;

&lt;p&gt;WebExpo 2026 Conference website:&amp;nbsp;&lt;a href="https://webexpo.net/" rel="noopener noreferrer"&gt;https://webexpo.net/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🏷️And if you want to purchase a ticket, use the code "ANGULAR26" at the checkout to get 50 EUR off.&lt;/p&gt;




&lt;h2&gt;
  
  
  🤖 Angular AI skills, tools and development
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/gde/migrating-to-nano-banana-2-enhancing-your-angular-firebase-ai-app-1jae"&gt;Migrating to Nano Banana 2: Enhancing Your Angular Firebase AI App&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/connieleung404" rel="noopener noreferrer"&gt;Connie Leung&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angular.dev/local-ai-reactive-routing-and-the-vitest-migration-bdddad0cfa96" rel="noopener noreferrer"&gt;Local AI, Reactive Routing, and the Vitest Migration!&lt;/a&gt;
&lt;/h3&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://medium.com/ngconf/speckit-companion-e4fc99d1e061" rel="noopener noreferrer"&gt;SpecKit Companion&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://twitter.com/alfrodo_perez" rel="noopener noreferrer"&gt;Alfredo Perez&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  💎Angular Gems of March, 2026
&lt;/h2&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://angular.love/angular-schematics-deep-dive-part-2-ng-generate" rel="noopener noreferrer"&gt;Angular Schematics Deep Dive — Part 2&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/@SakthikumaranN" rel="noopener noreferrer"&gt;Sakthikumaran Navakumar&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://dev.to/playfulprogramming-angular/vitests-41-new-fast-forward-mode-skips-timer-delays-instantly-4a4h"&gt;Vitest's 4.1 New "Fast-Forward" Mode Skips Timer Delays Instantly&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://www.linkedin.com/in/yjaaidi/" rel="noopener noreferrer"&gt;Younes Jaaidi&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://www.angulararchitects.io/en/blog/migrating-to-angular-signal-forms-interop-with-reactive-forms/" rel="noopener noreferrer"&gt;Migrating to Angular Signal Forms: Interop with Reactive Forms&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/ManfredSteyer" rel="noopener noreferrer"&gt;Manfred Steyer&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://push-based.io/article/onpush-will-become-the-default-cd-strategy-what-to-expect" rel="noopener noreferrer"&gt;OnPush will become the default CD Strategy - What to expect?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/Enea_Jahollari" rel="noopener noreferrer"&gt;Enea Jahollari&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📰 &lt;a href="https://blog.angulartraining.com/angular-templates-interpolation-vs-property-binding-whats-the-difference-cffc6943e4eb" rel="noopener noreferrer"&gt;Angular Templates: Interpolation vs. property binding, what’s the difference?&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;By &lt;a href="https://x.com/AlainChautard" rel="noopener noreferrer"&gt;Alain Chautard&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  👨‍💻About the author
&lt;/h2&gt;

&lt;p&gt;My name is &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;Gergely Szerovay&lt;/a&gt;, 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 &lt;a href="https://angularaddicts.com/" rel="noopener noreferrer"&gt;Angular Addicts&lt;/a&gt; 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! &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Subscribe here&lt;/a&gt; 🔥&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://www.angularaddicts.com/" rel="noopener noreferrer"&gt;Substack (Angular Addicts)&lt;/a&gt;, &lt;a href="https://aiboosted.dev" rel="noopener noreferrer"&gt;Substack (AIBoosted.dev)&lt;/a&gt;, &lt;a href="https://medium.com/@GergelySzerovay" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;, &lt;a href="https://dev.to/gergelyszerovay"&gt;Dev.to&lt;/a&gt;, &lt;a href="https://twitter.com/GergelySzerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/gergelyszerovay/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!&lt;/p&gt;

&lt;h2&gt;
  
  
  🕹️Previous issues
&lt;/h2&gt;

&lt;p&gt;If you missed the previous issues of the newsletter, you can read them &lt;a href="https://www.angularaddicts.com/t/angular-addicts-monthly" rel="noopener noreferrer"&gt;here&lt;/a&gt;, these are the latest 3 issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-47-skills-signal-forms" rel="noopener noreferrer"&gt;Angular Addicts #47: Angular 21.2, Skills, Signal Forms &amp;amp; moree&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-46-skills-signal-forms" rel="noopener noreferrer"&gt;Angular Addicts #46: Angular 21.1, Skills, Signal Forms &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.angularaddicts.com/p/angular-addicts-44-angualr-21-signal-forms-vitest" rel="noopener noreferrer"&gt;Angular Addicts #45: Signal Form guides, AI integrations &amp;amp; more&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  📨 Submit your Angular resource
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://twitter.com/gergelyszerovay" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;! I might feature it in the next Angular Addicts issue!&lt;/p&gt;

</description>
      <category>angular</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Ng-News 26/12: Future of Selectorless, Skills vs. MCP, Zoneless Testing</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Fri, 10 Apr 2026 13:22:25 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2612-future-of-selectorless-skills-vs-mcp-zoneless-testing-3gmo</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2612-future-of-selectorless-skills-vs-mcp-zoneless-testing-3gmo</guid>
      <description>&lt;p&gt;Ng-News 26/12 covers the Angular Q&amp;amp;A on selectorless and Skills versus MCP, then zoneless testing and auto tick from the Angular Plus Show.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/AV8DDpkbeZI"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Angular Q&amp;amp;A: selectorless and Skills vs MCP
&lt;/h2&gt;

&lt;p&gt;The monthly Q&amp;amp;A session featured Mark Thompson as host and Alex Rickabaugh, tech lead of the Angular framework.&lt;/p&gt;

&lt;p&gt;Alex explained why selectorless got downgraded. Selectorless was a planned feature that would have allowed referring to components in a template by using their class name. In the latest roadmap update, that feature was removed.&lt;/p&gt;

&lt;p&gt;According to Alex, selectorless would have been a huge jump. The risk of an AI agent not being able to write modern Angular code was not worth the DX benefits from selectorless. Therefore, that feature is on hold and will be re-evaluated in the future.&lt;/p&gt;

&lt;p&gt;Timestamp: 0:05:50&lt;/p&gt;

&lt;p&gt;Skills and MCPs: According to Alex, Skills are starting to replace MCP tools, because a Skill can tell the agent about certain CLI commands, which can replace a dedicated MCP tool call.&lt;/p&gt;

&lt;p&gt;Timestamp: 23:11&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/VigynyjJJnM"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Zoneless testing and auto tick
&lt;/h2&gt;

&lt;p&gt;The Angular Plus Show published an episode on &lt;strong&gt;zoneless testing&lt;/strong&gt; with Andrew Scott (Angular team), &lt;a class="mentioned-user" href="https://dev.to/younesjd"&gt;@younesjd&lt;/a&gt;, and Rainer Hahnekamp.&lt;/p&gt;

&lt;p&gt;Zoneless tests run outside Zone.js, which clarifies some patterns but means you cannot use &lt;code&gt;fakeAsync&lt;/code&gt; or &lt;code&gt;waitForAsync&lt;/code&gt; in that mode.&lt;/p&gt;

&lt;p&gt;With zoneless, change detection in tests would be triggered like in the application, whereas in zone-based tests, users had to trigger it very often manually via &lt;code&gt;ComponentFixture#detectChanges&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The panel also discussed &lt;strong&gt;auto tick&lt;/strong&gt;, recently released around the time of recording and covered in a prior ng-news segment.&lt;/p&gt;

&lt;p&gt;It can simplify async behavior when timer APIs are faked, but it is not always the first choice: mixing real and fake timers produces confusing failures, and faking timers overrides timing globally and can affect third-party code you do not control.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/wgWCOdeshtE"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Upcoming Conferences
&lt;/h2&gt;

&lt;p&gt;This is a new feature of ng-news. At the end of each article, we are listing all upcoming conferences.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://angularbelgrade.org/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangularbelgrade.org%2Fbanners%2Fng-belgrade-conf-2026.jpg" height="424" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://angularbelgrade.org/" rel="noopener noreferrer" class="c-link"&gt;
            NG Belgrade Conf 2026
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            NG Belgrade Conf 2026 is the largest Angular conference in the Balkans. It takes place in Belgrade, Serbia, including a Conference Day on May 7th and a Workshop Day on May 8th. Join us to explore the latest trends and best practices in Angular!
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fangularbelgrade.org%2Fassets%2Ffavicon-A8dvQfkm.ico" width="256" height="256"&gt;
          angularbelgrade.org
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://ngbaguette.angulardevs.fr/en/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;ngbaguette.angulardevs.fr&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>angular</category>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>Ng-News 26/11: TypeScript 6, NgRx RFCs delegatedSignal, Resource Extensions</title>
      <dc:creator>ng-news</dc:creator>
      <pubDate>Fri, 03 Apr 2026 17:43:23 +0000</pubDate>
      <link>https://dev.to/playfulprogramming-angular/ng-news-2611-typescript-6-ngrx-rfcs-delegatedsignal-resource-extensions-ig6</link>
      <guid>https://dev.to/playfulprogramming-angular/ng-news-2611-typescript-6-ngrx-rfcs-delegatedsignal-resource-extensions-ig6</guid>
      <description>&lt;p&gt;Main topics: &lt;strong&gt;TypeScript 6.0&lt;/strong&gt; and &lt;strong&gt;NgRx&lt;/strong&gt; (RFCs for &lt;code&gt;delegatedSignal&lt;/code&gt; and resource extensions). Also in brief: Martina Kraus on security, debounce for async validators, Alfredo Perez on SpecKit, and Angular Graz on YouTube.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/SOJddVKtnMo"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  TypeScript 6.0
&lt;/h2&gt;

&lt;p&gt;TypeScript 6.0 was released and it is going to be the last TypeScript version, written in TypeScript. Officially, TypeScript 6 is seen as the bridge between TypeScript 5 and TypeScript 7 (which will be written in Go). First of all, TypeScript 6 is not yet part of Angular. So you can't make use of those changes yet. Angular 21 supports TypeScript 5.9, but 22 will support TypeScript 6.&lt;/p&gt;

&lt;p&gt;In order to prepare for version 7, TypeScript 6 comes primarily with a lot of deprecations and new default settings, which pay tribute to the modern TypeScript ecosystem.&lt;/p&gt;

&lt;p&gt;For example, ESM is now default module system, the strict mode is enabled and the target is the ECMAScript version with the number of the current last year. By now, that would be ECMAScript 2025.&lt;/p&gt;

&lt;p&gt;When it comes to the deprecation. Target ES5, which was the last version of JavaScript without the class syntax, lambda expressions, Promises, let or const, string interpolation, and much more got deprecated.&lt;/p&gt;

&lt;p&gt;What also went away is the &lt;code&gt;baseUrl&lt;/code&gt; property in the &lt;code&gt;tsconfig.json&lt;/code&gt; file, support for the module systems amd, umd, and systemjs (not sure if our younger colleagues still know what that is) has also gone. You can of course also revert those deprecations, but be aware that in TypeScript 7, that means game over.&lt;/p&gt;

&lt;p&gt;There is an automatic migration tool available, which is marked as experimental.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fwp-content%2Fuploads%2Fsites%2F11%2F2026%2F03%2Fts-6.0-2.png" height="350" class="m-0" width="562"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/" rel="noopener noreferrer" class="c-link"&gt;
            Announcing TypeScript 6.0 - TypeScript
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            TypeScript 6.0 is now available! TypeScript 6 is a stepping-stone release, aligning with the upcoming native-speed 7.0 release.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fwp-content%2Fuploads%2Fsites%2F11%2F2018%2F10%2FMicrosoft-Favicon.png" width="18" height="18"&gt;
          devblogs.microsoft.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;There are also new features, and the most prominent one is the introduction of the Temporal API.&lt;/p&gt;

&lt;p&gt;This is a new, built-in date and time API in JavaScript, which can be seen as a full replacement for the old Date object. As that, it provides way more functionality for example handling timezones, a calendar which can be used to reflect Chinese or other calendar systems, immutability and a range of utility functions.&lt;/p&gt;

&lt;p&gt;Some veterans of us might remember the switch to the Date-time API in Java more than 10 years ago. It kind of did the same thing.&lt;/p&gt;

&lt;p&gt;Temporal API has reached stage 4 of the TC39 process, which means it is standardized, finished. That doesn't mean that each platform supports it. The latest version of Chrome, Firefox supports it, but not Safari and also Node.js which means if you use it, you should secure your code with polyfills.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://www.typescriptlang.org/play/?target=99&amp;amp;amp;jsx=0&amp;amp;amp;ssl=5&amp;amp;amp;ssc=46&amp;amp;amp;pln=1&amp;amp;amp;pc=1#code/MYewdgzgLgBFIBMCGBPGBeGAVApgWwAcQAnJAGwDoA5EAdwoLKQEswARJKHASQGUB5ABQBKANwAoUJFjQkxKPwBmATRxyMcRKgq1mUABaCA3jDzgDALhgBGADQxkKK9ZgBfMZPDQHzRYo2y8kqqchQArmBQzGSC8I4enpAgZDgUZCAA5oIABgAkRgi+ihSOEK4OqBAw+kgAbjgwBEgQEDgI2WJAA" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;typescriptlang.org&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;today&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Temporal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Now&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;plainDateISO&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;startOfYear&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;today&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;with&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;month&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;day&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;startOfYear&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;until&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;today&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;days&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; days have passed`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  NgRx RFCs
&lt;/h2&gt;

&lt;p&gt;NgRx is the most used library for state management in Angular and official work has begun on supporting resources but also forms. Two RFCs for that have landed.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;code&gt;delegatedSignal()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The first RFC is related to supporting Signal Forms and it introduces a new Signal type called &lt;code&gt;delegatedSignal&lt;/code&gt;. To the outside it is a writable Signal, but it doesn't store a value. Instead it writes and reads to another Signal. What's the use of it?&lt;/p&gt;

&lt;p&gt;Let's say we have a user object in a Signal, that has two nested properties: &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;address&lt;/code&gt;. &lt;code&gt;name&lt;/code&gt; has &lt;code&gt;firstName&lt;/code&gt; and &lt;code&gt;lastName&lt;/code&gt;, and &lt;code&gt;address&lt;/code&gt; has &lt;code&gt;street&lt;/code&gt; and &lt;code&gt;city&lt;/code&gt;, like this:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;signal&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;firstName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;lastName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Doe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;street&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;123 Main St&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;city&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Anytown&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If we have a form, which requires a flattened version of the user object, we would usually create a &lt;code&gt;linkedSignal&lt;/code&gt;. The problem is that changes in the form might be synchronized back to the original Signal. At the moment, the only way would be to use an &lt;code&gt;effect&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;``&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;UserPage&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;signal&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;street&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Main Street&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;city&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;London&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="nx"&gt;userFormModel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;linkedSignal&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;user&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;user&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;city&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;user&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;street&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;user&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;}))&lt;/span&gt;

  &lt;span class="nx"&gt;userForm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userFormModel&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;syncEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;effect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;userFormModel&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;code&gt;delegatedSignal&lt;/code&gt; solves this problem by writing synchronously back to the original Signal.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// PROTOTYPE!!!&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;delegatedSignal&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;computation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;update&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;WritableSignal&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;delegated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;linkedSignal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;computation&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;delegated&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;delegated&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;update&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;updateFn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;updateFn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;delegated&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;delegated&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;``&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;UserPage&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;signal&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;street&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Main Street&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;city&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;London&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="nx"&gt;userFormModel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;delegatedSignal&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;computation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
        &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; 
        &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; 
      &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;user&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;update&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;firstname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lastname&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;street&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;city&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="nx"&gt;userForm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userFormModel&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;The &lt;code&gt;delegatedSignal&lt;/code&gt; can be used for different use cases. Not just forms. Regarding the SignalStore, you could connect a Signal Form and a SignalStore together, where each change in the form is directly written to the SignalStore.&lt;/p&gt;

&lt;p&gt;You can see the &lt;code&gt;delegatedSignal&lt;/code&gt; as a &lt;code&gt;linkedSignal&lt;/code&gt; which doesn't create a clone, but just writes directly back to the original Signal. &lt;code&gt;delegatedSignal&lt;/code&gt; exists already in the Angular framework (slightly differently as &lt;code&gt;deepSignal&lt;/code&gt;), but is not exposed publicly. Angular uses it for the Signal Forms:&lt;br&gt;
&lt;a href="https://github.com/angular/angular/blob/394ad0c2a26eec8a8f7136b1b7971420b30a117e/packages/forms/signals/src/util/deep_signal.ts#L21" rel="noopener noreferrer"&gt;https://github.com/angular/angular/blob/394ad0c2a26eec8a8f7136b1b7971420b30a117e/packages/forms/signals/src/util/deep_signal.ts#L21&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/ngrx/platform/issues/5121" rel="noopener noreferrer"&gt;ngrx/platform#5121 — RFC delegatedSignal&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Resource Extensions
&lt;/h3&gt;

&lt;p&gt;And the second RFC is related to resources. It allows to extend the resources which goes beyond the possibilities of the current &lt;code&gt;snapshot&lt;/code&gt; function. For example, an extension would change the behavior of a resource in an error state, where an access to the value does not throw. Custom extensions are possible as well and there is even the option to define default extensions.&lt;/p&gt;

&lt;p&gt;All two issues were created by &lt;a class="mentioned-user" href="https://dev.to/markostanimirovic"&gt;@markostanimirovic&lt;/a&gt; and if the same Marko was also guest at a previous episode of the Angular Plus show. So if you are interested to hear more about state management and SignalStore specifically, you should check out the episode.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/ngrx/platform/issues/5126" rel="noopener noreferrer"&gt;ngrx/platform#5126 — RFC resource extensions&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/hBOwrpnUDds"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;
&lt;h2&gt;
  
  
  Martina Kraus on security (Angular Plus Show)
&lt;/h2&gt;

&lt;p&gt;In other news, the Angular Plus Show also had Martina Kraus as guest, which usually means the topic is about security.&lt;/p&gt;

&lt;p&gt;Together with the three hosts, Lara Newsom, Brooke Avery, and Jan-Niklas Wortmann, they discussed a whole portfolio of security. Be it trusted types, Sanitization, attacks like XSS and CSRF, but also content policies and the increased risk that comes with AI.&lt;/p&gt;

&lt;p&gt;At the end, Martina gave some tips where to start with security and she also highlighted the OWASP juice shop, which is written in Angular and is a playground to try out different vulnerabilities.&lt;/p&gt;

&lt;p&gt;And by the way, you should not store your access token in local storage.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/kyxF0Kk3WEQ"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://owasp.org/www-project-juice-shop/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fowasp.org%2Fwww--site-theme%2Ffavicon.ico" height="64" class="m-0" width="64"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://owasp.org/www-project-juice-shop/" rel="noopener noreferrer" class="c-link"&gt;
            OWASP Juice Shop | OWASP Foundation
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Probably the most modern and sophisticated insecure web application for security trainings, awareness demos and CTFs. Also great voluntary guinea pig for your security tools and DevSecOps pipelines!
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fowasp.org%2Fwww--site-theme%2Ffavicon.ico" width="64" height="64"&gt;
          owasp.org
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;h2&gt;
  
  
  Form validation: debouncing async validators
&lt;/h2&gt;

&lt;p&gt;And we have a third debounce option in Angular. For Signal Forms, there is a &lt;code&gt;debounce&lt;/code&gt; function, which debounces the synchronization of a form field with the underlying model. The second is a &lt;code&gt;debounced&lt;/code&gt; function, scheduled for Angular 22 and is meant for any Signal type out there. The new one, is debouncing for asynchronous validators in Signal Forms. That allows you to have "undebounced" synchronous validators, but debouncing an asynchronous validator.&lt;/p&gt;

&lt;p&gt;That feature has been merged into the 22 version branch, but didn't make it into the latest 21.2.7 version. So it seems, we have to wait for Angular 22.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/angular/angular/commit/24e52d450d201e3da90bb64f84358f9eccd7877d" rel="noopener noreferrer"&gt;angular/angular@24e52d4 — debounce on validateAsync / validateHttp&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Alfredo Perez: SpecKit and SpecKit Companion
&lt;/h2&gt;

&lt;p&gt;&lt;a class="mentioned-user" href="https://dev.to/alfredoperez"&gt;@alfredoperez&lt;/a&gt; published a three-article series about a Spec-driven development process with AI. The most prominent tool in that spectrum is GitHub's SpecKit, which Alfredo describes. Additionally, he has created a VSCode extension, called SpecKit Companion, not just to visualize but also to edit and execute that specification.&lt;/p&gt;

&lt;p&gt;Since GitHub's SpecKit is not the only tool out there, Alfredo also shows alternatives and how SpecKit Companion can be configured to support those tools as well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/ngconf/speckit-companion-e4fc99d1e061" rel="noopener noreferrer"&gt;https://medium.com/ngconf/speckit-companion-e4fc99d1e061&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/ngconf/custom-workflows-in-speckit-companion-266fda3b5eec" rel="noopener noreferrer"&gt;https://medium.com/ngconf/custom-workflows-in-speckit-companion-266fda3b5eec&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/ngconf/build-your-own-sdd-workflow-daa3fc1ae673" rel="noopener noreferrer"&gt;https://medium.com/ngconf/build-your-own-sdd-workflow-daa3fc1ae673&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=alfredoperez.speckit-companion" rel="noopener noreferrer"&gt;https://marketplace.visualstudio.com/items?itemName=alfredoperez.speckit-companion&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Angular Graz Meetup videos
&lt;/h2&gt;

&lt;p&gt;Finally, the recordings of the Angular Graz Meetup are available on YouTube. They are published not at once but in a regular interval.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/o0FK5ZORAv4"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>angular</category>
      <category>ngrx</category>
      <category>webdev</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
