DEV Community: ng-news

Ng-News 26/11: TypeScript 6, NgRx RFCs delegatedSignal, Resource Extensions

ng-news — Fri, 03 Apr 2026 17:43:23 +0000

Main topics: TypeScript 6.0 and NgRx (RFCs for delegatedSignal and resource extensions). Also in brief: Martina Kraus on security, debounce for async validators, Alfredo Perez on SpecKit, and Angular Graz on YouTube.

TypeScript 6.0

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.

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.

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.

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.

What also went away is the baseUrl property in the tsconfig.json 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.

There is an automatic migration tool available, which is marked as experimental.

Announcing TypeScript 6.0 - TypeScript

TypeScript 6.0 is now available! TypeScript 6 is a stepping-stone release, aligning with the upcoming native-speed 7.0 release.

devblogs.microsoft.com

There are also new features, and the most prominent one is the introduction of the Temporal API.

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.

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.

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.

typescriptlang.org

const today = Temporal.Now.plainDateISO();
const startOfYear = today.with({ month: 1, day: 1 });
const diff = startOfYear.until(today);

console.log(`${diff.days} days have passed`);

NgRx RFCs

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.

`delegatedSignal()`

The first RFC is related to supporting Signal Forms and it introduces a new Signal type called delegatedSignal. 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?

Let's say we have a user object in a Signal, that has two nested properties: name and address. name has firstName and lastName, and address has street and city, like this:

const user = signal({
  name: { firstName: 'John', lastName: 'Doe' },
  address: { street: '123 Main St', city: 'Anytown' }
});

If we have a form, which requires a flattened version of the user object, we would usually create a linkedSignal. 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 effect.

@Component({
  template: ``
})
export class UserPage {
  user = signal({
    name: {
      firstname: "John",
      lastname: "Doe"
    },
    address: {
      street: 'Main Street',
      city: 'London'
    }
  })

  userFormModel = linkedSignal(() => ({
    firstname: this.user().name.firstname,
    lastname: this.user().name.lastname,
    city: this.user().address.city,
    street: this.user().address.street,
  }))

  userForm = form(this.userFormModel);

  syncEffect = effect(() => {
    const { firstname, lastname, street, city } = this.userFormModel();

    this.user.set({
      name: { firstname, lastname },
      address: { street, city }
    })
  })
}

delegatedSignal solves this problem by writing synchronously back to the original Signal.

// PROTOTYPE!!!
export function delegatedSignal<T>(config: {
  computation: () => T,
  update: (value: T) => void
}
): WritableSignal<T> {
  const delegated = linkedSignal(config.computation);

  delegated.set = (value: T) => config.update(value);
  delegated.update = (updateFn: (value: T) => T) => updateFn(delegated())

  return delegated;
}


@Component({
  template: ``
})
export class UserPage {
  user = signal({
    name: {
      firstname: "John",
      lastname: "Doe"
    },
    address: {
      street: 'Main Street',
      city: 'London'
    }
  })

  userFormModel = delegatedSignal({
    computation: () => {
      const { 
        name: { firstname, lastname }, 
        address: { city, street } 
      } = this.user();
      return { firstname, lastname, street, city }
    },
    update: ({ firstname, lastname, street, city }) => {
      this.user.set({
        name: { firstname, lastname },
        address: { street, city }
      })

    }
  })

  userForm = form(this.userFormModel);
}

The delegatedSignal 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.

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

ngrx/platform#5121 — RFC delegatedSignal

Resource Extensions

And the second RFC is related to resources. It allows to extend the resources which goes beyond the possibilities of the current snapshot 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.

All two issues were created by @markostanimirovic 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.

ngrx/platform#5126 — RFC resource extensions

Martina Kraus on security (Angular Plus Show)

In other news, the Angular Plus Show also had Martina Kraus as guest, which usually means the topic is about security.

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.

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.

And by the way, you should not store your access token in local storage.

OWASP Juice Shop | OWASP Foundation

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!

owasp.org

Form validation: debouncing async validators

And we have a third debounce option in Angular. For Signal Forms, there is a debounce function, which debounces the synchronization of a form field with the underlying model. The second is a debounced 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.

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.

angular/angular@24e52d4 — debounce on validateAsync / validateHttp

Alfredo Perez: SpecKit and SpecKit Companion

@alfredoperez 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.

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.

https://medium.com/ngconf/speckit-companion-e4fc99d1e061

https://medium.com/ngconf/custom-workflows-in-speckit-companion-266fda3b5eec

https://medium.com/ngconf/build-your-own-sdd-workflow-daa3fc1ae673

https://marketplace.visualstudio.com/items?itemName=alfredoperez.speckit-companion

Angular Graz Meetup videos

Finally, the recordings of the Angular Graz Meetup are available on YouTube. They are published not at once but in a regular interval.

Ng-News 26/10: Signality, Vitest 4.1, Angular Skills

ng-news — Fri, 27 Mar 2026 18:56:51 +0000

This week's ng-news covers ngxtension on Angular Space, Signality's signal-first utilities inspired by VueUse, and Vitest 4.1 fake-timer improvements for Angular tests. We also look at official Angular agent skills.

Angular Space and ngxtension

ngxtension, a set of utility functions, was the topic on the Angular Space live stream. The hosts were - as always - Armen Vardanyan and Enea Jahollari, the maintainer of ngxtension; Enea joined the stream after a few minutes.

They discussed several main features. For example, injectParams, which a former episode of ng-news covered already, and the on helper, which offers strong developer experience for explicit effects but can also be used for explicit signal tracking in computed, resources, or linkedSignal.

ngxtension.dev

Signality

Another promising library that offers utility functions - this time only signal-based - was published. Signality is its name, and according to its author, Vyacheslav Borodin, it is heavily inspired by VueUse, a popular library of utilities for Vue.js. Although Signality was released at version 0.1, the number of functions is already quite impressive.

Getting started | Signality

Comprehensive library of signal-first utilities for Angular. SSR-ready, type-safe, and designed for seamless reactive composition and DI-interop.

signality.dev

Vitest 4.1 fake timers

Vitest, Angular's default testing framework for new projects, was released in version 4.1 and gained a major improvement in handling asynchronous timers. Fake timers gained an automatic tick mode.

In the past, when code used a delayed timer - for example because of debounceTime - you often had to advance those timers manually in tests. Now there is a mode that advances scheduled timers asynchronously without you hard-coding each delay. You no longer need to remember whether it was 100 ms, 200 ms, or something else. It does not remove asynchronicity, but it runs the deferred work on a short tick - roughly speaking, along the lines of setTimeout(() => void true, 0).

@younesjd added a section about that feature to his cookbook, and the Vitest documentation has more detail.

Vi | Vitest

Next generation testing framework powered by Vite

main.vitest.dev

Controlling Time in Tests | Marmicode Cookbook

Understand why time-based behavior is challenging to test and how fake timers and dynamic timing configuration address different scenarios.

cookbook.marmicode.io

Official Angular agent skills

Official Angular skills have landed. You can install them now with npx skills add angular/skills. After that, your agent should pick them up whenever the LLM decides to use them.

Skills are text content that explains to the LLM - for example, how Signal Forms work or how Angular's dependency injection works. The main distinction from MCP servers, basic rules, custom instructions, or whatever term your agent uses, is that skills are not loaded automatically up front. A skill starts with a short description of what it covers, which does not overload context, and - as noted above - when the LLM decides it is time to use one, it can load the full body on demand.

That pattern lets you keep many skills available without bloating every prompt.

Angular skills are not new. Ng-News already covered the Analog.js skills, which were created in January. As their author Brandon Roberts confirmed, now that official Angular skills exist, the Analog.js skills are deprecated.

angular/skills (GitHub)

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

Ng-News 26/09: AI & Angular, debounced() in v22, Oxidation Compiler in Analog

ng-news — Thu, 19 Mar 2026 20:43:38 +0000

Ng-News 26-09 features three topics: the new Signal-based debounced API, the Oxidation compiler benchmark in Analog.js, and AI & Angular.

Angular XSS Advisory

A Cross-Site Scripting (XSS) vulnerability was discovered in Angular. If you use Angular i18n and apply it to HTML attributes, their values are not sanitized. The fix was applied to the supported versions Angular 19, 20, and 21.

Angular security advisory (GitHub)

Ng-Asia with Mark Thompson

Mark Thompson, Angular DevRel, was guest at Ng-Asia hosted by Ilyoskhuja Ikromkhujaev. The session was a mix between presentation and Q&A.

For example, Mark presented his view on how AI will shape the way development will work for us. He doesn't expect a replacement a software developers, but - as many people would agree - a shift in terms of activities/competencies.

He also explained what AI means for future applications, where the UI is highly responsive and can be seen as just another AI tool, instrumented by an LLM. There are libraries that support that use case already, like HashBrown.

Angular Q&A with Mark Thompson

Mark Thompson also hosted the monthly Angular Q&A session. His guest was Alan from the Angular team and the main topic was AI - specifically Angular's MCP server combined with Chrome's MCP server. MCP allows LLMs to perform actions, not just return text. Angular's MCP server provides up-to-date documentation on best practices, can help migrate to zoneless, or act as a tutor. Together with Chrome's MCP server, it allows the LLM to verify its generated code automatically and fix it.

Two answers stood out. First, a nice analogy on how skills and MCP tools differentiate. According to Mark, a tool's execution is more deterministic, whereas a skill is still text, which needs to be processed by the LLM, and could therefore cause non-deterministic, but better or different results, than an MCP tool's author could achieve.

He compared it with playing a piece of music on a guitar. In the case of an MCP tool and if the LLM would be an artist, then the LLM would play a piece always in the same way - without even knowing how or what it is doing.
In the context of a skill, it would learn how to play the guitar and could probably identify certain things that the tool would have oversawn.
For example Mark mentioned, that there could a first part of a piece, which the tool was not aware of, but the skill would cover it.

Second, why is Angular investing so much in AI? According to Mark, if you have a framework without AI support, many developers will say that it is not ready for the future and will switch to others. Given AI's omnipresence, having an AI-ready framework is a reasonable choice.

Timestamp 41:20.

Oxidation Compiler and Analog

As mentioned in a previous episode, there is an experimental Angular compiler, which is developed by Void Zero and is called the Oxidation compiler (Oxc).
The interesting thing is that it is written in Rust, and not in Go, which is the language of choice for the upcoming official TypeScript rewrite.

Brandon Roberts, who is well known in the Angular community, has integrated the Oxidation compiler into Analog.js, the most popular meta-framework for Angular, which supports building Angular with Vite. Brandon posted a benchmark stating that build time with Angular's esbuild dropped from 47 seconds to 1.5 seconds - a roughly 97% improvement.

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

Angular Roadmap Update

Angular's roadmap got a major update, or one could say a reprioritization. In short, AI is king: topics like a new authoring format, streaming for server-side rendering, or improvements to the TestBed were removed. That does not mean these topics will never be worked on, but they are deprioritized for now.

Angular roadmap change (GitHub commit)

Angular NPM Downloads

If you are a fan of download numbers: despite the results of the State of JavaScript survey, Angular appears to be in a strong position. In May 2025, weekly downloads exceeded 4 million for the first time. In the week of March 9th they were above 5 million - roughly a 25% increase within a year. For reference, Angular passed 3 million weekly downloads in February 2022.

@angular/core | npm trends

Comparing trends for @angular/core 21.2.6 which has 5,338,072 weekly downloads and 100,138 GitHub stars.

npmtrends.com

Debounced API

Fatima Amzil published an article about a new Signal-based function called debounced. Do not confuse it with the debounce function in Signal Forms: that one is limited to Signal Forms and debounces the synchronization of a form field with the underlying model. The new debounced is meant for any Signal - you can use it to debounce a resource's value, a computed, a linkedSignal, or a function that returns a value (which will be automatically tracked). The return value is not another Signal but a resource. debounced is targeted for Angular 22.

Michael Small also contributed a post on Bluesky with a GIF demonstrating the new function.

https://famzil.medium.com/angular-22-the-power-of-debound-and-debounced-apis-c41e33c0a18e

Just landed in the Angular nightly: debouncing signals. Photo of code snippet + link to PR in this thread github.com/angular/angu...
— Michael Small (@michaelsmalldev.bsky.social) 2026-03-09T22:14:51.079Z

Angular Vienna and Code Magazine

In other news, the Angular Vienna meetup took place and the recording of the live stream is available on YouTube. At the meetup, Dmytro Mezhenskyi from Decoded Frontends gave his first public talk. Other speakers were Matthieu Riegler from the Angular team on JavaScript in general and the upcoming changes in Angular due to the TypeScript rewrite in Go, Manfred Steyer on AI in Angular, and Daniel Szendrei on Angular hacks.

Sonu Kapoor published an in-depth article on the evolution of Angular forms in Code Magazine. The article contains almost 15,000 words.

From Template-Driven to Signal-Driven: The Complete Evolution of Angular Forms

Sonu Kapoor's article, "From Template-Driven to Signal-Driven: The Complete Evolution of Angular Forms," provides a comprehensive exploration of Angular's evolving form APIs, tracing their journey ...

codemag.com

Ng-News 26/08: Angular 21.2

ng-news — Thu, 12 Mar 2026 17:54:46 +0000

The release of Angular 21.2 introduced several significant features - most notably for Signal Forms - while also delivering key enhancements across the broader framework.

Angular 21.2 was released. According to the plan, that was the last minor release in the 21.x series. The next major release will be Angular 22 in May. According to schematic versioning, a minor brings only bug fixes and small features, but there is quite a lot in this release.

Signal Forms

Signal Forms have picked up several useful features that round it out and suggest it is moving toward stability or developer preview.

Form Submission

For example, the need to manually disable form submission is now handled in a simple way. You no longer have to wire this yourself: add the formRoot directive to the form and it turns off the browser default submit behavior (e.g. full page reload).

You configure the submit handler via the submission option of the form() function. That handler runs only when the user actually submits (e.g. Enter or the submit button) and when the form is not invalid.

By default, that means submit can run even while asynchronous validators are still pending.

While an async validator is running, it keeps {invalid: false, valid: false}.

Submit only happens if the invalid is true, so pending validators do not block submission.

You can change this with ignoreValidators: 'none' if you want to wait until all validators, including async, have finished.

The default is permissive because the server will validate again on submit anyway, so there is no need to wait for client-side async validators before allowing the request.

import { bootstrapApplication } from '@angular/platform-browser';
import { 
  Component, computed, inject, Injectable, signal 
} from '@angular/core';
import {
  form,
  FormField,
  FormRoot,
  submit,
  validateAsync,
  validateStandardSchema,
} from '@angular/forms/signals';

@Injectable({ providedIn: 'root' })
export class UserService {
  save(user: { firstName: string; lastName: string }) {
    return Promise.resolve(undefined);
  }
}

@Component({
  selector: 'app-root',
  imports: [FormField, FormRoot],
  template: `
    <form [formRoot]="userForm">
      <input [formField]="userForm.firstName" />
      <input [formField]="userForm.lastName" />
    </form>
  `,
})
export class App {
  private readonly user = signal({
    firstName: '',
    lastName: '',
  });

  protected readonly userForm = form(this.user, {
    submission: {
      action: () => this.userService.save(this.user()),
    },
  });

  protected readonly userService = inject(UserService);
}

bootstrapApplication(App);

Code Example on Stackblitz

Custom Control

For custom controls, we now have the ability to use the transformedValue utility for formatting and parsing.

For example, it can be used for input fields with non-English number or date formats.

import { bootstrapApplication } from '@angular/platform-browser';

import { Component, model, signal } from '@angular/core';
import {
  form,
  FormField,
  FormRoot,
  FormValueControl,
  transformedValue,
} from '@angular/forms/signals';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-german-number-field',
  template: `<p><ng-content /></p>
      <input
        matInput
        [value]="rawValue()"
        (input)="rawValue.set($event.target.value)"
      />`,
  imports: [],
})
export class GermanNumberField implements FormValueControl<number> {
  readonly value = model.required<number>();

  readonly rawValue = transformedValue(this.value, {
    parse: (value: string) => ({ value: Number(value.replace(',', '.')) }),
    format: (value) => String(value).replace('.', ','),
  });
}

@Component({
  selector: 'app-root',
  imports: [FormField, FormRoot, GermanNumberField, JsonPipe],
  template: `
    <form [formRoot]="userForm">
    <app-german-number-field [formField]="userForm.heightInMeter">Height in Meters</app-german-number-field>
    {{user() | json}}
    </form>
  `,
})
export class App {
  protected readonly user = signal({
    heightInMeter: 1.75,
  });

  protected readonly userForm = form(this.user);
}

bootstrapApplication(App);

Code Example on Stackblitz

SignalFormControl

Although the improved form submission and the advanced features for custom controls are really great, most of us work with an existing Angular application.

For us, the most important new feature is SignalFormControl. It allows you to introduce a FormControl into Reactive Forms that supports, for example, the advanced validation rules from Signal Forms.

That makes the migration to Signal Forms much easier.

import { bootstrapApplication } from '@angular/platform-browser';

import { Component, inject, resource } from '@angular/core';
import { required, debounce, validateAsync } from '@angular/forms/signals';
import { SignalFormControl } from '@angular/forms/signals/compat';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="userForm">
      <input formControlName="email" />
    </form>
  `,
})
export class App {
  protected readonly userForm = inject(FormBuilder).nonNullable.group({
    email: new SignalFormControl<string>('user@host.com', (path) => {
      required(path, { message: 'Email is reqired' });
      debounce(path, 500);
      validateAsync(path, {
        params: (ctx) => ctx.value(),
        factory: (params) => {
          return resource({
            params,
            loader: () => Promise.resolve(true),
          });
        },
        onSuccess: () => undefined,
        onError: () => ({ kind: 'networkError' }),
      });
    }),
  });
}

bootstrapApplication(App);

Code Example on Stackblitz

`ResourceSnapshot`

The Resource Snapshot API was finally released. That is a feature that was expected to land in Angular 21 already; it was in the main branch but got reverted.

In short, Resource Snapshots allow you to map one resource to another or use them for compositional tasks.

The example given in the docs changes the default behavior of setting the value to undefined during loading to keeping the original value. In Angular's codebase, the snapshot is used for testing, where it acts as a convenient resource factory function. We will see what use cases are possible.

The example below shows an error handler, which can be used to avoid the error status.

import { bootstrapApplication } from '@angular/platform-browser';
import {
  Component,
  computed,
  Resource,
  resource,
  resourceFromSnapshots,
  signal,
} from '@angular/core';
import { JsonPipe } from '@angular/common';
import { FormField, FormRoot, form } from '@angular/forms/signals';

function withErrorHandler<T>(
  resource: Resource<T>,
  errorHandler: (error: Error) => T
) {
  const res = computed(() => {
    const snap = resource.snapshot();
    if (snap.status === 'error') {
      try {
        return { status: 'resolved' as const, value: errorHandler(snap.error) };
      } catch (error) {
        if (error instanceof Error) {
          return { status: 'error' as const, error };
        }
      }
    }
    return snap;
  });

  return resourceFromSnapshots(res);
}

@Component({
  selector: 'app-root',
  imports: [FormRoot, FormField, JsonPipe],
  template: `
    <form [formRoot]="idForm">
      <input [formField]="idForm.id" type="number"/>

      <pre>{{safeUser.value() | json}}</pre>
      <pre>{{unsafeUser.value() | json}}</pre>
    </form>
  `,
})
export class App {
  idForm = form(signal({ id: 0 }));

  unsafeUser = resource({
    params: () => this.idForm.id().value(),
    loader: ({ params: id }) => {
      if (id < 0) {
        throw new Error('no negative users ;)');
      }

      return Promise.resolve({ id, name: 'John Doe' });
    },
  });

  safeUser = withErrorHandler(this.unsafeUser, () => ({
    id: 0,
    name: 'John Undefined',
  }));
}

bootstrapApplication(App);

Code Example on Stackblitz

CLI - Prettier Integration

As the CLI already provides full integration of Tailwind CSS, Angular 21 also integrates Prettier as a first-class citizen.

Lambdas in Templates

The syntax in the template, which is not native JavaScript, has been extended with two new features. We can now use lambda functions directly in templates.

The favored use case is to call the update method on a signal.

In general, logic should stay out of the template, so do not overuse this feature.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <p>Current Value: {{counter()}}</p>
  <button (click)="counter.update((value) => value + 1)">Increment</button>
  `,
})
export class App {
  counter = signal(0);
}

bootstrapApplication(App);

Code Example on Stackblitz

Exhaustive Checks

The @switch statement now supports exhaustive checking: the compiler verifies that all possible cases are covered when you use @default never.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';

type UserType = 'admin' | 'anonymous';

@Component({
  selector: 'app-root',
  template: `
@switch(userType) {
  @case('anonymous') {
    <p>Welcome Visitor</p>
  }
  @case('admin') {
    <p>Welcome admin</p>
  }
  @default never;
}

  `,
})
export class App {
  userType: UserType = 'admin';
}

bootstrapApplication(App);

Code Example on Stackblitz

ChangeDetectionStrategy.Eager

As already announced, ChangeDetectionStrategy.Default was renamed to ChangeDetectionStrategy.Eager. The reason is that in Angular 22, in May, the default will become OnPush, and because it does not make sense to call the non-default option "default", its new name is Eager.

You do not have to change anything. If you explicitly use ChangeDetectionStrategy.Default, you can remove that setting or, even better, migrate to OnPush.

You are not forced to change anything. When Angular 22 is released, the update scripts will explicitly set existing implicit or explicit components with ChangeDetectionStrategy.Default to ChangeDetectionStrategy.Eager.

Sources and Thanks

For further information, check out the official changelog and a big thanks to Cedric Exbrayat

His article was the main source for this episode.

Merci beaucoup Cedric!

What's new in Angular 21.2? - Ninja Squad

Angular 21.2 is out!

blog.ninja-squad.com

Angular CHANGELOG (GitHub)

Ng-News 26/07: Angular's Router, Vitest, Hashbrown, History & Popularity

ng-news — Tue, 24 Feb 2026 23:24:05 +0000

Andrew Scott on Angular's Router, Vitest with Younes Jaadi, Hashbrown and AI, State of JS and 100k stars, Maximilian's Angular retrospective, ngxtension 7.1 and ngDiagram 1.0.

Andrew Scott on Angular's Router

Andrew Scott, member of the Angular team, was a guest on Armen Vardanyan's podcast at Angular Space, and they discussed a wide range of topics.

They talked about a potential integration of resources into the router, where the router would know exactly what kind of data needs to be loaded and the loading could also be done in parallel. Right now we have a waterfall effect, where each segment with its resolvers needs to be loaded sequentially.

On RxJS, it is still going to become optional in the future, but that does not have the highest priority at the moment.

Another topic was the relationship between community libraries and Angular. For example, ngxtension has a lot of useful utility functions for the router, which would make sense to be part of the framework. Andrew meant that the framework should provide the building blocks and the community should build certain features on top of it.

The TypeScript rewrite in Go was also discussed. A lot of the Angular team's time is currently going into preparing for that rewrite.

Theoretically, a mixed approach might also be possible. Alex Rickabaugh, lead of the Angular framework, was not on the podcast, but he posted that they are looking into using Rust in some parts of Angular's compilation process.

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

Younes Jaadi on Vitest

Younes Jaadi posted a video about Vitest, which is Angular's default testing framework since Angular version 21.

His main focus was on the so-called browser mode, which uses an E2E-style runner such as Playwright or WebdriverIO to interact with the DOM. He shared technical insights and pragmatic tips on how to use Vitest.

Younes is highly respected in the Angular community and has been promoting Vitest in Angular before it became the official testing framework.

Manfred Steyer on Hashbrown and AI in Angular

AI shows up in many places, including Angular, where it can generate dynamic components, accept prompts, and call tools on the fly. A prominent library for this is Hashbrown.

Manfred Steyer has written a three-article series on the topic: basic setup, integrating a prompt, connecting with your application, and more advanced features such as dynamic components or letting Hashbrown execute code in the browser.

Dynamic Reports: Natural Language Queries with On-the-Fly Code Generation - ANGULARarchitects

angulararchitects.io

State of JavaScript and Angular's popularity

State of JavaScript released the results from last year. Angular saw a rise in 2024 in metrics around popularity and satisfaction, and a small decline in 2025, with some gap to 2023. The survey's sample is often said to be not representative, so the numbers may not reflect the broader population.

State of JavaScript

stateofjs.com

Angular's repository on GitHub has reached 100,000 stars. For comparison, React has about 240,000 and Vue about 53,000. Enea Jahollari posted about a Reddit thread on the webdev subreddit where someone asked if Angular is still used; as Enea put it, there were some good comments about Angular.

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

Maximilian Schwarzmüller – 10 Years of Angular

Maximilian Schwarzmüller is a well-known name in Angular. His Udemy course has been the door opener for many Angular developers since 2016. He published a video titled "Looking back at 10 years of Angular - and into its future", covering the early days, milestones, and where we are now. If you want nostalgia or a brief overview of Angular's history, it's a good watch.

Also in the News

Ngxtension 7.1 brought injectParams.global(), which gives you one signal with all the parameters of the current route hierarchy.

ngxtension.dev

ngDiagram had its first stable release with version 1. It has zero dependencies, is based on modern Angular, and lets you create interactive diagrams. It looks very promising.

ngdiagram.dev

If you use VS Code, check out the latest Angular VS Code extension; it includes some new goodies.

https://github.com/angular/angular/releases/tag/vsix-21.2.0/

Ng-News 26/05: OnPush as Default, Agent Skills, Q&A

ng-news — Wed, 11 Feb 2026 08:00:00 +0000

Agent Skills are landing for Angular. This episode also covers the January Angular Q&A (Jeremy Elbourn leaving, markForCheck discussion, Dart's legacy) and Mark Thompson's RFC to make OnPush the default.

Skills landing in Analog first, and now in Angular

The AI world continues to evolve, and things that were top notch yesterday are already outdated today. When it comes to teaching AI how to write proper and modern Angular code, the answer in 2025 was the Angular CLI's built-in MCP server. In 2026, the answer is Skills.

With MCP, we have the issue that they overload the context size of the LLM, because the tools' manifest has to be loaded always. Skills, on the other hand, are lightweight. They are not loaded automatically - only a small amount of metadata. The whole content is only loaded once on demand, namely when the LLM decides that it is now time to use it.

Skills, like MCP, were introduced by Anthropic, which stands behind Claude Code. They first introduced them in October last year and in December standardized them as Agent Skills. To use them, you usually need one of the common IDEs that are good at AI integration, and you are not limited to Claude's models; it also works with others like GPT or Gemini.

Brandon Roberts posted that he added skills to Analog.js, which is a meta-framework for Angular. One week later, Angular reacted as well: Mark Thompson confirmed and created a PR so that Skills land officially in Angular.

// Detect dark theme var iframe = document.getElementById('tweet-2014895426088919431-979'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2014895426088919431&theme=dark" }
Angular PR #66834

claude.com

Overview - Agent Skills

A simple, open format for giving agents new capabilities and expertise.

agentskills.io

Angular Q&A with the Angular team

We had the January Angular Q&A with the Angular team. As usual, Mark Thompson and Jeremy Elbourn were there, but this time they were joined by Doug Parker, the lead of the Angular CLI team. Unfortunately, it was also the last appearance of Jeremy Elbourn. He announced that he is leaving Google already in February. Jeremy Elbourn is the current Angular uber lead, which means he presides over the Angular projects - Material, framework, and the CLI. A successor has not been announced yet.

A very interesting side note: Jeremy was discussing the behavior of markForCheck on event listeners. So at the moment, a handled DOM event triggers change detection, and there was an internal discussion about changing that. The outcome was not to do it now, but to integrate that change once the "legendary" Signal Components come out. Signal Components were announced as a requirement for zoneless and were planned to land in Angular 17. But in the end, zoneless could be done without those kinds of changes, and Signal Components lost in terms of priority.

Using Dart in Angular had some negative consequences. It was there in the beginning but did not have the best impact on Angular's API. For example, Dart does not have types for DOM elements, and that's why nativeElement is any. Dart also does not have undefined, and that's why null shows up often in the older API.

ChangeDetection OnPush should become the default for Angular

Mark Thompson has published an RFC to set Angular's default change detection strategy to OnPush. The current one is called Default - probably not the best name.

OnPush means that when Angular synchronizes the state of our application with the DOM, a component under OnPush has to be marked as dirty in order to be checked for actual change. That dirty marking only happens if you have a handled user event, run markForCheck manually, use the async pipe, or - of course - if a Signal changes. A component that is not dirty also excludes its children from the change detection process.

Since Default is not the best name, it will get an alias called Eager, and that is already going to happen in Angular 21.2, which will be released later this month. The actual switch to OnPush as the default will happen in Angular 22.

As always, existing codebases will not be modified - safety first. As it was when standalone became the default, existing apps will get the explicit setting to ChangeDetectionStrategy.Eager (aka Default) via automatic migration.

RFC Discussion #66779

Ng-News 26/04: Micro Frontends at Google

ng-news — Sun, 08 Feb 2026 23:38:00 +0000

Doug Parker from the Angular team shared insights on Micro Frontends at Google — isolation, Protocol Buffers, and when to avoid the approach. This episode also covers the TypeScript Go rewrite progress, and Angular DevTools Signal Graph updates.

Micro Frontends at Google

Doug Parker was a guest at the Angular Meetup Graz, which was this time more a podcast. Doug is a member of the Angular team, focuses on the CLI, and talked about Micro Frontends at Google.

A little bit of context. Google has a monorepo, which means all applications are within one repository. That does not mean they use Micro Frontend architectures. In fact, there has been some information (also on ng-news) where we shared the Micro Frontend approach of Google's Cloud Console, which is based on a huge micro frontend architecture using an iFrame approach, which is not used anymore.

Instead, the new concept is to do Micro Frontends in complete isolation. In order to avoid collisions with shared dependencies, Google plays it safe. They do not share anything at all. So a very autonomous solution. When it comes to shared logic, they use Protocol Buffers, where a service is not really shared between micro frontends but more a messaging infrastructure. Another requirement is that they have the need to combine multiple frameworks together.

Doug's approach is to see Micro Frontends as a contract between apps. In the end, there is an interface that needs to be implemented and the infrastructure takes care of the integration.

There are no plans to open source the solution once it is finished.

When should Micro Frontends be used? Whenever the underlying problem could be solved in a different way, then try out that approach before Micro Frontends. For example build times could be improved in different ways.

If there are hard UX requirements, a micro-frontend approach might be hard to implement.

Lastly, very often Micro Frontends are used to reduce the communication between teams. One has to ask first, if this is actually the goal, or if the opposite approach, namely, where people need to talk with each other more, should be achieved.

Status Update on Go Rewrite of TypeScript

Last year, TypeScript announced that they are going to rewrite the compiler in Go, which should bring performance improvements that might be an order of magnitude, so about 10 times.

This undertaking takes some time and consumes obviously all the resources of the team. Push-based posted about the current state. We are coming closer and the upcoming version of TypeScript 6.0 will be the last one written in TypeScript.

The Angular team follows and has already started to make their codebase ready for v6 as well.

#angular #typescript #js | PushBased

TypeScript is changing forever! v6.0 will be the last JS-based release before the complete native Go rewrite in v7.0. TS Team is officially transitioning v6.0 into "Maintenance Mode" to focus on the port. 🔥 Major Breaking Changes to prepare for: - Strict by Default: 𝘀𝘁𝗿𝗶𝗰𝘁: 𝘁𝗿𝘂𝗲 is finally the default. - No More Legacy Modules: Support for 𝗮𝗺𝗱, 𝘂𝗺𝗱, and 𝘀𝘆𝘀𝘁𝗲𝗺𝗷𝘀 is being removed. - Modern Targets: 𝘁𝗮𝗿𝗴𝗲𝘁 defaults to 𝗲𝘀<𝗰𝘂𝗿𝗿𝗲𝗻𝘁 𝘆𝗲𝗮𝗿> (Evergreen). - Faster Builds: 𝘁𝘆𝗽𝗲𝘀 defaults to [ ] (stops auto-including every @𝘁𝘆𝗽𝗲𝘀 package). - Enum Merging: Removed. - Side Effects: 𝗻𝗼𝗨𝗻𝗰𝗵𝗲𝗰𝗸𝗲𝗱𝗦𝗶𝗱𝗲𝗘𝗳𝗳𝗲𝗰𝘁𝗜𝗺𝗽𝗼𝗿𝘁𝘀 defaults to 𝘁𝗿𝘂𝗲. The Goal? A 10x faster compiler, but it requires shedding legacy weight. Links: - Maintenance Mode (TS #62963): https://buff.ly/BRBTweG - Deprecation List (TS #54500): https://buff.ly/Tb7QyGl The Angular Team has started preparing for it too: https://buff.ly/Tb5KSBS #angular #typescript #js

linkedin.com

Angular PR #66578

Miscellaneous

The Angular DevTools provide a visualization of the Signal Graph. The latest version received an update and now gives a much better view on the resource, which in the end is a group of different Signals belonging together.

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

New Conferences

Last but not least, ticket sales for Ng-India, India's largest Angular conference, have started.

ng-ind.com

And again, if you are organizing a conference, please reach out to us so that we can promote it here.

Ng-News: Angular 21.1

ng-news — Fri, 23 Jan 2026 20:36:23 +0000

Angular 21.1 is out with a smaller set of updates, but there are still some useful changes to cover. This episode highlights Signal Forms updates, experimental router auto-cleanup, and template syntax extensions.

Signal Forms

As Signal Forms are still experimental, breaking changes within a minor and even patch are allowed and do happen.

Probably the most impactful change was that the Field directive was renamed to FormField. You now use FormField and [formField], while Field and [field] were completely removed and are no longer available.

Technically speaking, that change and most others didn't come with the minor release but already happened within patch releases of the 21.0 range.

@Component({
  selector: 'app-customer-registration',
  template: `
    <div>
      <mat-form-field>
        <input
          type="text"
          matInput
          [formField]="customerForm.firstname"
        />
      </mat-form-field>
    </div>
  `,
  imports: [
    FormField,
    MatFormFieldModule,
    MatInputModule
  ],
})
export class CustomerRegistrationScreen {
  readonly customerForm = form(signal({ firstname: ''}), (path) => {
    required(path.firstname, { message: 'First name is required' });
  });
}

Auto Cleanup for Router-Provided Services

We usually provide a service in root, that means we have a singleton, so one instance throughout the whole application, or we can provide it locally. That is usually done within a component and that instance goes down with the component and it is only available within that component and its children.

But there is also another option, namely to provide a service on the router level. Until now, that service was instantiated when users entered that route but did not get destroyed and it was also not available in another route. So kind of a mixture between global and local.

Angular 21.1 brings a new experimental router option for these services that auto-cleans route injectors, so the service behaves like one provided in a component and gets destroyed when users switch to a different route.

@Injectable()
export class Counter {
  readonly count = signal(0);

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(() => {
        this.count.update((c) => c + 1);
      });
  }
}

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter</h1>
    <p>Count: {{ count() }}</p>
  `,
})
export class CounterPage {
  protected readonly count = inject(Counter).count;
}

export const appConfig: ApplicationConfig = {
  provideRouter(
    [
      {
        path: 'counter',
        component: CounterPage,
        providers: [Counter],
      },
    ],
    withExperimentalAutoCleanupInjectors(),
  )
  // ...
}

Template Syntax Extensions

Angular's template allows us to inline code which looks like JavaScript but isn't. That's why features that JavaScript has but are missing in the template have to be implemented explicitly.

Angular 21.1 extends its "template syntax" with the possibility of multiple consecutive switch case statements and supports the three dots, better known as the spread and rest operator.

type Status = 'guest' | 'anonymous' | 'member' | 'subscriber' | 'admin';

@Component({
  selector: 'app-welcome',
  template: ` <h2>Welcome</h2>
    @switch (status()) {
      @case ('guest')
      @case ('anonymous') {
        <p>Please sign in</p>
      }
    }`,
})
export class Welcome {
  status = signal<Status>('guest');
}

Miscellaneous

Beyond the headline features, there are smaller improvements across the router and image-loading utilities. There are also reports of new MCP server tooling to better support running the dev server.

How Do We Continue

As always, consult the changelog on GitHub and community write-ups for details and migration notes.

The current public schedule suggests Angular 21.2 is planned for the week of February 23, with Angular 22 targeted for May and no further 21.x minors after that, but confirm in the official roadmap.

Angular releases on GitHub

Ng-News 26/02: Frameworks in 2026, Competition among Frameworks, Angular Inside

ng-news — Tue, 20 Jan 2026 20:51:41 +0000

This episode covers framework direction perspectives, a deep dive into Angular template type checking, and several community updates.

📺 Watch the full episode on YouTube:

Ryan Carniato on 2026

Ryan Carniato is the creator of Solid.js and has a good overview of what the various front-end frameworks are doing. He published an article where he gave his prediction for 2026.

The rise of powerful SSR techniques (he mentioned React Server Components and Astro’s island architecture) led to separate code paths—one for the server and one for the client. Ryan expects frameworks to reduce that friction and coined the term isomorphic-first for this. In my opinion, if you want to see that reduced friction in action, Angular’s incremental hydration gets it right.

Ryan sees asynchronicity as a central theme for the future. Frameworks will integrate async behavior more deeply rather than treating it as an add-on. Examples include Angular’s resource, and what React is doing under the “Async React” framing, which is a mix of techniques that work together.

Lastly on AI: Ryan says meta-frameworks used to win by packaging tools together, but AI can now stitch those basic tools on its own, so that advantage is shrinking.

Ryan Carniato for Playful Programming

Jan 5

JavaScript Frameworks - Heading into 2026

#webdev #javascript #webperf #frameworks

104

Comments 28

8 min read

Mark Thompson at PodRocket

Mark Thompson, DevRel on the Angular team, was a guest on the PodRocket podcast. It was aimed at a non-Angular audience, so most things that were discussed are broadly known, but at the end, Mark explained a little on how they see the competition. Every framework has a very similar feature set, and it is not that Angular wants to attract Svelte, React, or Vue users (or the other way around).

Every framework looks at its user and optimizes the framework for their users. Or to put it short: when it comes to new features, it is more what the Angular community wants and not so much what React developers want from Angular.

Apart from that, AI will bring changes in the way how developers write applications. They won't even care what framework is used, other things like MCP, context files could become more important.

Angular from the Inside (Angular Space)

Angular from the Inside was the title of the Angular Space podcast. Armen Vardanyan had Matthieu Riegler from the Angular team as a guest.

Matthieu showed how the template checks are actually working. He showed this in VSCode: Angular's compiler runs a special compilation just for the type check (via the language service for the VSCode integration) and then another compilation for the final application code.

They also discussed things beyond compilation: the most requested PR, general insights into how the Angular team works internally, a PR explained in detail, and an overview of what is going to come for Angular 21.1 (which has already been released).

An episode you don't want to miss if you are interested in learning some of Angular's internals.

https://www.youtube.com/live/vz4LZAimZBc

Tailwind Crisis

Tailwind is also in the news, but unfortunately with sad news. Their business model was based on selling UI components. Unfortunately, you usually only discover those products if you visit their website and documentation, which is what we developers usually do... or rather, used to do. Because these days, AI applies the proper Tailwind classes automatically. Although Tailwind is used more than ever, 75% of the engineering team has been laid off because the company became a victim of the current AI trend. The good news is that Vercel and Google have contacted them and stepped in with sponsorships to help find a solution.

https://github.com/tailwindlabs/tailwindcss.com/pull/2388#issuecomment-3717222957

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

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

Angular Three v4

Angular Three is a library from Chau Tran, which gives a deep integration of THREE.js into Angular. THREE.js is a very popular library for creating 3D graphics. Version 4 was released and the underlying renderer got completely rewritten.

So if you are already using Angular Three, the blog post recommends that you treat version 4 as a complete fresh start.

angularthree.org

Community Shoutout: ngx-dev-toolbar

Shoutout to the community for new libraries. Alfredo Perez released ngx-dev-toolbar, which gives you a nice UI to apply common tasks, like toggling features, switching languages, mocking the network, and so on.

alfredoperez / ngx-dev-toolbar

A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser.

Angular Toolbar

A development toolbar for Angular 19+ applications that helps developers interact with the application more efficiently.

Why ngx-dev-toolbar?

Toggle feature flags without backend changes
Simulate complete i18n environments (locale, timezone, currency, RTL)
Test product features and subscription tiers
Switch themes on the fly
Change user sessions effortlessly
Mock network requests in real-time
Test permission-based UI without backend changes

No more context switching or backend dependencies - everything you need is right in your browser!

Installation

npm install ngx-dev-toolbar

Quick Start

Add the toolbar to your app.config.ts alongside your other providers:

// app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideToolbar } from 'ngx-dev-toolbar';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    provideToolbar({
      enabled: isDevMode(),
    }),
  ],
};

// main.ts

…

View on GitHub

If you have written a new library or are organizing a conference, please let us know. We are going to announce it here.

Ng-News 26/01: Ng-Poland Outtakes - Keynote and Q&A

ng-news — Mon, 12 Jan 2026 08:00:00 +0000

The Angular team reveals their vision for AI-powered development workflows using MCP Servers, where LLMs generate, test, and debug Angular applications autonomously. Plus, learn about Signal Forms migration paths, the new @ng-forge/dynamic-forms library, and NgRx 21.

📺 Watch the full episode on YouTube:

This episode covers news from around Christmas until New Year's Eve. The next episode will focus solely on events from 2026.

Ng-Poland Keynote

Ng-Poland took place in November, and videos from both the keynote and the Q&A session with the Angular team are now available on YouTube. Here are the main takeaways.

The keynote discussed features introduced in Angular 21, which we covered in a previous episode. The keynote, however, was mainly about AI.

MCP Server Workflow

First, Jeremy Elbourn explained an AI-supported workflow that we can expect.

With the help of Angular's MCP Server (Model Context Protocol), the LLM would first generate modern Angular code. It would also start the application and test the produced code via Playwright's MCP Server.

If there was a bug, the Angular MCP could connect to the running browser and collect the context of the running application—its state, so to speak—to find the error and fix it.

AI as User

Second, Alex Rickabaugh, tech lead of the Angular framework, discussed what changes the framework requires to be prepared for what might come. In the past, they have been doing user studies with real developers, where they showed them certain APIs that they wanted to introduce and then observed how those developers were dealing with them. Nowadays, they also see AI as an end-user and have a similar approach.

Alex also mentioned that they have to prepare for more dynamic UIs. They don't have anything concrete yet, but they recommend checking out community solutions like Hashbrown.

Keynote video:

Q&A Session

Next, there was also the Q&A. Here are three interesting takeaways:

Security

There was a question on how to protect your codebase from malicious libraries, especially from those kinds of attacks which we have seen in the second half of 2025. Here, we can just take a look at the measures Angular does for its own project.

They use pnpm, which has a lot of advantages over npm. For example it doesn't automatically execute post-install scripts.
Renovate is responsible for managing the upgrades and it has a setting which doesn't install packages until they've been published for a certain period of time, for example 2 days.

Generally speaking, studying the Angular repo itself will show further measures for improving security.

Angular Material and UI Libraries

There was also a question about @angular/aria and how it fits together with Angular Material. Jeremy said that the days of having full-blown UI libraries which might be a little hard to customize are over.

The current trend is more towards customizable individual design systems, and this is why @angular/aria is strong. It only provides the behavior, the visual is completely up to the developers.

Signal Forms Migration

And there were, of course, also a few questions about Signal Forms.

The migration from Reactive Forms or Template-Driven Forms is also important. At the moment, we do have the possibility to reuse FormControl or FormGroup from Reactive Forms in Signal Forms, but Alex also announced that there will be a path towards the other direction: Reactive Forms will be able to run Signal Forms.

Q&A video:

Dynamic Forms

There is this idea of having dynamic forms. So you provide a certain set of metadata, which includes the value, the validation rules, but also the UI type (select box, input field, radio button, or checkbox), and then the form could be generated dynamically.

For the old form system, there were some libraries which did that. A prominent one was ngx-formly. At the moment, it is not clear if ngx-formly will provide support for Signal Forms and, if so, how it will do so.

But there is a new library, built from the beginning for Signal Forms. Its name is @ng-forge/dynamic-forms. It comes with an integration of common UI libraries: Angular Material, Bootstrap, but also PrimeNG and Ionic.

ng-forge - Dynamic Forms for Angular

Forms are boring. Your code shouldn't be. Write the config, we handle the rest. Type-safe, signal-native, zero boilerplate Angular forms.

ng-forge.com

NgRx 21

NgRx, the most used library for state management in Angular, was released in version 21. It brings a new website, the events plugin for the SignalStore went stable, and further improvements.

Tim Deschryver for NgRx

Dec 22 '25

Announcing NgRx 21: Celebrating a 10 Year Journey with a fresh new look and @ngrx/signals/events

#ngrx #angular

Comments 1

5 min read

Ng-News: Angular in 2025

ng-news — Fri, 02 Jan 2026 20:29:42 +0000

The main topics this year were the Signal evolution—specifically the polish of the Resource API and Signal Forms—and the massive shift toward AI.

We also used a new layout for this video. Please let us know what you think about it—either here or in the YouTube comments.

Signal Forms

Let's start with the headline feature: Signal Forms. They are fairly young. The team announced them at ng-Poland in 2024, and it took a full year until they landed in Angular 21.

We waited a long time for Signal Forms. Enterprise applications rely heavily on forms; some might even say a frontend application is just a collection of forms.

Signal Forms succeed both template-driven and Reactive forms. They combine the advantages of the old systems but in a modern, signal-based way. In template-driven forms, the form wrote directly into the data structure we provided. With Signal Forms, that structure needs to reside inside a Signal.

Validation works like it did in Reactive forms: we define it in TypeScript. But here again, the validation system is far better than the old one. There is almost no limit on what you can do with it.

The complexity with custom controls also disappears. We no longer need to implement the clumsy ControlValueAccessor interface. Instead, we bind a property called value via the model function, and that's it.

Signal Forms are still experimental, but the Angular team stated they plan to remove the experimental status soon.

Here's a full example

type UserData = {
  id: number;
  firstname: string;
  lastname: string;
  subscribe: false;
};

@Component({
  selector: 'app-button-checkbox',
  template: `
    @if (value()) {
      <button (click)="value.set(true)">Subscribe to Newsletter</button>
    } @else {
      <button (click)="value.set(false)">Unsubscribe from Newsletter</button>
    }
  `,
})
export class ButtonCheckbox implements FormValueControl<boolean> {
  value = model.required<boolean>();
}

@Component({
  template: `<form>
    <input [field]="userForm.id" type="number" />
    <input [field]="userForm.firstname" />
    <input [field]="userForm.lastname" />
    <app-button-checkbox [field]="userForm.subscribe" />
  </form>`,
  imports: [Field, ButtonCheckbox],
})
export class UserForm {
  private readonly userData = signal<UserData>({
    id: 1,
    firstname: 'John',
    lastname: 'Smith',
    subscribe: false,
  });
  protected readonly userForm = form(this.userData, (path) => {
    required(path.id, { message: 'Id is required' });
    required(path.firstname, { message: 'Firstname is required' });
    required(path.lastname, { message: 'Lastname is required' });
  });
}

The Resource API

The resource appeared in version 19 (late 2024), but in the minor release of 19.2, we got the third primitive: the httpResource.

The resource bridges the gap whenever a Signal depends on an asynchronous task. In most cases, that task is an HTTP Request, which makes the httpResource vital.

httpResource uses the HttpClient under the hood. This means all interceptors still work the same. That doesn't necessarily mean everyone uses the HttpClient. If we use a generated data client service (via OpenAPI) that exposes an Observable, we use rxResource instead.

In Angular 20, the resources received a final overhaul. For example, they now throw an error if we access the value in an error state, and the status values became strict union types. Like Signal Forms, the resources are still experimental. Hopefully, that will change soon, maybe even in a minor release of version 21.

const page = signal(0);
const pageSize = signal(10);

const holidays = httpResource(
  () => ({
    url: '/holidays',
    params: { page: page(), pageSize: pageSize() },
  }), // similar to httpClient.get('/holidays', { params: { ... } })
  {
    defaultValue: [],
    parse: parseHolidays,
  },
);

AI

And of course, AI. We saw massive investment here.

The basics: We received an MCP Server which improves with each release. Most importantly, it contains instructions for the LLM to produce modern Angular code—Signals, template control syntax, standalone components, etc.

But AI and Angular go much deeper. The Angular team researches what a framework needs to be "AI-ready." They try to optimize the API not just for us users, but also for an AI agent. They run several tests and even wrote a Codegen Scorer to evaluate the results.

Furthermore, we see that Gemini (Google's LLM) made big leaps this year. If you are the Angular team, and you sit in the same company that lives and breathes AI, you benefit from a good environment and access to all necessary resources.

But because of this huge investment in AI, we also had to accept that other features might not have received the love they needed.

Miscellaneous

Zoneless

What else happened? Zoneless became not just stable, but also the default mode in Angular 21. If we consider the time span from developer experience to stable and then default, it happened within just one major version.

Vitest

Speaking of fast, Vitest skipped "developer preview" and "stable" and jumped from experimental directly to default. That also happened in Angular 21. We finally have a top-tier testing framework and don't have to hide from other ecosystems.

`@angular/aria`

Then came @angular/aria. It follows the trend where we want full control over our UI components but still want help with behavior. This is exactly what @angular/aria does. It gives you a set of directives that promise proper accessibility behavior.

Deprecation of `@angular/animations`

Finally, we saw a deprecation with @angular/animations. We no longer need a separate package or the complex DSL. The new, minimalistic animation support lives directly in the template. We now use animate.enter and animate.leave to handle entry and exit transitions right where we define the HTML.

Statistics & Perception

In terms of download statistics, the "Angular Renaissance" has not yet materialized into a massive spike. Downloads continue to rise, but they do so steadily.

Generally, the perception of Angular has turned positive again. However, real-world effects take time. Enterprises—our main user base—move slowly. Many prefer to wait until the transition to "Modern Angular" is fully complete before upgrading.

Outlook 2026

This brings us to the outlook. What can we expect in 2026?

I expect—and hope—that Signal Forms and the Resource API will finally hit stable status.

Last year, I predicted Selectorless components and a new Authoring Format. Neither happened in 2025, so I will carry them over to next year. "Selectorless" means we refer directly to a component class in the template, requiring only one import. As for the authoring format... nobody knows. It could be Signal Components, a switch from classes to functions, or something else entirely. We will see.

Ng-News in Spanish and Portuguese

Last but not least, ng-news now exists in Spanish and Brazilian Portuguese versions. I am really happy that creators from Latin America approached me and joined the project. These are separate YouTube channels, and I hope we add even more languages next year.

https://www.youtube.com/@ng-news-es

https://www.youtube.com/@ng-news-BRAZIL

So it looks good for another year of ng-news. A huge thanks to you—especially for your support when you share, like, and recommend the it to colleagues. That keeps ng-news rolling.

We wish you a successful and healthy New Year.

Ng-News 25/50: Auto-Destroy for Router Providers, Signal Forms

ng-news — Mon, 22 Dec 2025 15:07:36 +0000

Angular will bring auto-destroy for router providers and more updates around Signal Forms. The community shares new articles, talks, and practical examples.

Auto-Destroy for Router Providers

A new feature for the router will land in Angular 21.1. This might surprise some developers, because many assumed this behavior was already standard.

If a service is provided only at component level, so not in root, the service gets destroyed together with the component. This does not happen when a service is provided in the router. In that case, it stays alive across navigations. With Angular 21.1, it will become possible to destroy such services when users navigate away. The PR exists, but it has not been merged yet.

feat(router): add controls for route cleanup #65991

atscott posted on Dec 10, 2025

This commit introduces a new feature to automatically destroy EnvironmentInjectors associated with routes that are no longer active or stored. This helps in managing memory by releasing resources held by unused injectors.

Key changes:

Added shouldDestroyInjector and retrieveStoredRouteHandles to RouteReuseStrategy.
Introduced withExperimentalAutoCleanupInjectors provider function to opt-in to this feature.
Implemented a "mark and sweep" algorithm to identify and destroy unused injectors.
Added a dev mode warning if the strategy implements destruction methods but the feature is not enabled.
Added integration tests to verify the behavior.

This commit also destroyDetachedRouteHandle, a standalone function that allows developers to explicitly destroy the component associated with a DetachedRouteHandle.

We chose to implement this as a standalone function rather than adding a destroy() method to the DetachedRouteHandle type to avoid breaking changes. Currently, DetachedRouteHandle is defined as {}, and many applications mock it as such. Adding a required method to the interface would break these existing tests and usages.

By using a standalone function, we can safely cast the handle to its internal type and invoke destruction without altering the public contract of the handle itself.

This feature is particularly useful for RouteReuseStrategy implementations that need to drop stored handles and ensure the associated components are properly cleaned up to prevent memory leaks.

resolves #27290 resolves #37095 resolves #15873

View on GitHub

Signal Forms Guide with `compatForm`

Mateusz Stefańczyk from House of Angular published another long article on Signal Forms, adding to the growing list of community content. The article is interesting because it also covers compatForm. This function can work with a Signal as well as with a FormControl or FormGroup. It therefore offers a migration path from existing forms to Signal Forms.

angular.love

Alex Rickabaugh @ Jason Lengstorf

Alex Rickabaugh, tech lead of the Angular framework, was a guest on a livestream with Jason Lengstorf. The session had two parts. The first part focused on the underlying concepts and the motivation behind Signal Forms. The second part moved into live coding.

From Alex’s perspective, Signal Forms are clearly the direction forward. He also gave a good overview of the three different maturity states the Angular team uses for features.

...And so that's really what experimental is for us is...hey, this is not fully baked yet, but we're letting you on to it early because we really value that kind of on the ground feedback about how it's working for real use cases.

Then we have developer preview, which is more of, like a release extended release candidate. Like we think this is feature complete, this could ship as stable, but we want to give developers one more chance to kind of bang on it and see what breaks.

If we release an API as stable,... if we are going to make a breaking change to it, we give you two major versions to migrate, or from the time we deprecate something to the time we remove it. Or we have some kind of auto migration for you that will make sure that as you update the code, it kind of follows along.

Ng-Glühwein

ng-Glühwein, an Angular conference in Vienna, took place for the third year in a row, and the recordings are already available on YouTube. The talks covered a wide range of topics.

Push-based, as the organizer, contributed three talks. Julian Jandl and Christopher Holder spoke about performance. Adrian Romanski covered accessibility. Thomas Trajan presented modern strategies for dynamic component loading. Michael Hablich gave an AI-focused talk on the DevTools MCP server. Elise Patrikainen spoke about Angular resources.
Members of the Angular team were also present. Matthieu Riegler talked about Signals, and Alan Agius covered secure management of third-party libraries.

Push-Based - YouTube

Push-Based is a close knit group of IT experts offering their knowledge and services in #Angular #RxJS #NestJS #JavaScript #TypeScript #webperf and more.

youtube.com

Ng-Belgrade 2026

Ng-Belgrade has announced its revival for next year. The event will take place on May 7th, and ticket sales are already open.

NG Belgrade Conf 2026

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!

angularbelgrade.org