Angular 20 ng-reflect-* attributes missing in HTML, test cases failing due to missing attributes

I have been trying out the new Angular 20, I noticed a few test cases were failing, the test cases specifically were using ng-reflect-* to identify elements to test.

Below are two examples and screenshots highlighting my problem.

Angular 19 - ng-reflect-* is present:

Stackblitz Demo

Angular 20 - ng-reflect-* is missing:

Stackblitz Demo

Code:

@Component({
  selector: 'app-child',
  template: `
    {{user().firstName}} | {{user().lastName}}
  `,
})
export class Child {
  user = input.required<any>();
}
@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    <app-child [user]="user"/>
  `,
})
export class App {
  user: any = {
    firstName: 'test',
    lastName: 'tester',
  };
}

TL;DR

The ng-reflect-* attributes are not produced by default in Angular 20, if you need to use them, kindly add provideNgReflectAttributes to the providers array of bootstrap application.

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

...
bootstrapApplication(App, {
  providers: [
    provideNgReflectAttributes()
  ],
});

Stackblitz Demo

Note: If you do not seem to have the ng-reflect-* attributes after adding them to the providers array, kindly delete the cache folder (.angular) and restart the server.

As a part of the new Angular 20 Release.

There is a commit and pull request providing the details for this.

refactor(core): stop producing ng-reflect attributes by default #60973

This commit deprecates ng-reflect-* attributes and updates the runtime to stop producing them by default. Please refactor application and test code to avoid relying on ng-reflect-* attributes.

To enable a more seamless upgrade to v20, we've added the provideNgReflectAttributes() function (can be imported from the @angular/core package), which enables the mode in which Angular would be producing those attribites (in dev mode only). You can add the provideNgReflectAttributes() function to the list of providers within the bootstrap call.

In my case I needed these attributes since few test cases were using them as markers to identify elements for testing.