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

Question

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',
  };
}

"the test cases specifically were using ng-reflect-* to identify elements to test" - test behaviour, not implementation. — jonrsharpe
– jonrsharpe, Commented May 17 at 9:18
Please use text formatted as code rather than images when presenting code. Please see the supporting frequently asked question on the subject on meta — Heretic Monkey
– Heretic Monkey, Commented Jul 31 at 23:33

Naren Murali · Accepted Answer · 2025-05-17 09:02:18Z

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.

Nicky Haze · Accepted Answer · 2025-07-31 18:49:31Z

0

They are deprecated though (https://angular.dev/api/core/provideNgReflectAttributes), I suggest you use other attributes or selectors like data-cy for Cypress tests

answered Jul 31 at 18:49

Nicky Haze

12 bronze badges

Collectives™ on Stack Overflow

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

Angular 19 - ng-reflect-* is present:

Angular 20 - ng-reflect-* is missing:

Code:

2 Answers 2

TL;DR

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Angular 19 - ng-reflect-* is present:

Angular 20 - ng-reflect-* is missing:

Code:

2 Answers 2

TL;DR

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related