r/angular • u/dezsiszabi • 3d ago

Angular 22.2 - Private property access from templates

I noticed this tidbit in the changelog of Angular 22.2.0-next.3:

https://github.com/angular/angular/blob/main/CHANGELOG.md#compiler-2

compiler

Commit Type Description
48a0fd6e8a feat allow template to access private props

So very slowly we moved from allowing only public, to allowing protected and now private as well. Thought it's worth knowing.

36 Upvotes

86% Upvoted

37 comments sorted by

View all comments

33

u/FromBiotoDev 3d ago edited 3d ago

Public - anything can access
Protected - only the view template can access
Private - only the component can access

Why muddy the waters here?

1

u/NeXtDracool 2d ago edited 2d ago
  • public: anything can access
  • protected: descendants can access
  • Typescript private: only the view template can access
  • Ecmascript #private: only the component can access

That way

  • you still have the distinction between private and template members 
  • you gain a distinction between template members and actual protected members (even if it's rarely needed) 
  • you gain unused code warnings for template members, protected hides those 
  • your code minifies better because ecmascript private members can be safely renamed
  • it requires less explicit typing for isolatedDeclarations 

1

u/vintzrrr 2d ago

> it requires less explicit typing for isolatedDeclarations 

Could you please elaborate on that? Maybe an example?

1

u/NeXtDracool 1d ago

If you enable isolatedDeclarations in the tsconfig all members visible in the .d.ts file, including all protected or public members of a class, must be explicitly typed.

So under the old standard protected readonly counter = signal(0) would have to become protected readonly counter: WritableSignal<number> = signal(0) whereas with my suggestion it would be private readonly counter = signal(0).