Ordering of Angular component class members.

angular-member-ordering.md

Ordering of Angular component class members

Use the following order of groups to organize Angular components:

1. Injected dependencies.
2. Private properties.
3. Data binding properties.
4. View and content properties.
5. UI properties.
6. Component API properties.
7. Constructor.
8. Lifecycle hooks.
9. Event handlers.
10. Component API methods.
11. Private methods.

Group	Description
Component API methods	Public methods intended to be used by other components, directives, or services.
Component API properties	Public properties intended to be used by other components, directives, or services.
Data binding properties	Properties decorated by Input/Output or initialized with input/output.
Event handlers	protected methods used by the component template.
Injected dependencies	Services and other dependencies resolved using inject.
Lifecycle hooks	Methods implementing the AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck OnChanges, OnDestroy, or OnInit interfaces.
Private properties	Properties marked by private or #.
UI properties	protected properties used by the component template.
View and content properties	Properties decorated by ContentChild/ContentChildren/ViewChild/ViewChildren or initialized with contentChild/contentChildren/viewChild/viewChildren.

should take into consideration, that input/output signals/Decorators are (or at least from my perspective - should be) public. Yes you can assign protected and it will still be accessible in a usual way, but it doesn't represent the level of isolation as it should.
IMO, if you can provide or listen to it from outside, it is public.

Input and output properties are called data binding properties in this table. Indeed, they must be public (even though we don't have to mention public in TypeScript since everything in JavaScript/TypeScript is public by default), or it may lead to compile time errors.

Are there any tools that help checking the order is consistent?

@sturmf

TypeScript ESLint has a member-ordering rule but it doesn't differentiate between Angular-specific class members.

Input and output properties are called data binding properties in this table. Indeed, they must be public (even though we don't have to mention public in TypeScript since everything in JavaScript/TypeScript is public by default), or it may lead to compile time errors.

I think, that regardless of which table line/block is being sorted in code at the moment readonly should be higher. I feel like readonly provides an additional level of stricktness and thus should be also takken into account. e.g.:

private readonly apiService = inject(ApiService);
private someValue = "string";

In terms of Angular I would consider computed also as a readonly.