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.
Top comments (0)