Angular: Rethinking the Semantics of Private Fields

DRANK

Since the Angular v22.2.0 update, the behavior of the template compiler regarding private fields in component classes has changed. In this article, I will summarize the update and share my current thoughts on the semantics of field declarations that we should perhaps reconsider as a result.Content of the UpdateWith the Angular v22.2.0 update, class fields (member variables) declared with the private modifier can now be referenced from within a component’s template.Specifically, code like the following is now executable. Referencing the name field of a component using interpolation syntax no longer causes a compilation error.import { Component } from '@angular/core'; @Component({ selector: 'app-greeting', template: `<p>Hello, {{ name }}!</p>`, }) export class GreetingComponent { private name = 'Angular'; }The restriction has only been relaxed for fields declared with the private modifier; ECMAScript private fields using the # prefix still cannot be referenced and will result in …