Angular 21.1 delivers a more modest collection of changes, yet there are several notable improvements worth exploring. This overview covers the latest Signal Forms adjustments, the experimental router auto-cleanup feature, and new template syntax capabilities.
Signal Forms Adjustments
Because Signal Forms remain in an experimental state, breaking modifications are permitted across minor and even patch releases, and they do occur regularly.
The most significant adjustment is the renaming of the Field directive to FormField. Developers should now utilize FormField and [formField], whereas Field and [field] have been fully eliminated and are no longer supported.
Strictly speaking, this change alongside most others didn't arrive with the minor release but was already introduced within patch releases of the 21.0 series.
@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' });
});
}
Automatic Cleanup for Router-Provided Services
Typically, services are registered at the root level, resulting in a singleton instance shared across the entire application. Alternatively, they can be registered locally within a component, where the instance is destroyed alongside that component and remains accessible only to it and its child components.
However, there exists another approach: providing a service at the router level. Previously, this service would be instantiated upon entering the associated route but would not be destroyed, nor would it be accessible from other routes. This created a hybrid between global and local scoping.
Angular 21.1 introduces a new experimental router configuration for these services that triggers automatic cleanup of route injectors, causing the service to behave like a component-scoped provider and be destroyed when navigating away.
@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 Enhancements
Angular's template system permits inline code that resembles JavaScript but isn't truly JavaScript. Consequently, features that exist in JavaScript but are absent from templates must be explicitly implemented.
Angular 21.1 expands its template syntax by accommodating multiple consecutive switch case statements and supporting the ellipsis, commonly referred to 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');
}
Additional Updates
Beyond the main features, several minor refinements have been made to the router and image-loading utilities. Additionally, reports indicate new MCP server tooling designed to enhance dev server support.
Next Steps
As always, refer to the GitHub changelog and community articles for comprehensive details and migration guidance.
According to the current public timeline, Angular 21.2 is scheduled for the week of February 23, with Angular 22 expected in May and no additional 21.x minors following that. However, verify this information against the official roadmap.