Skip to content

Instantly share code, notes, and snippets.

@LayZeeDK

LayZeeDK/angular-member-ordering.md

Last active November 26, 2025 07:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LayZeeDK/d068ae084699b35dcdf8354d7dd829bc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LayZeeDK/d068ae084699b35dcdf8354d7dd829bc to your computer and use it in GitHub Desktop.
Download ZIP
Ordering of Angular component class members.
Raw
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.
@jeserkin
Copy link

jeserkin commented Apr 15, 2025 •
edited
Loading

There are also some values, that are readonly, so maybe, they would also have some spot in the table. Also, let's not forget about static. It is also widely used.

Also this

protected properties used by the component template.

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.

@sturmf
Copy link

sturmf commented Aug 4, 2025

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

@jeserkin
Copy link

jeserkin commented Aug 6, 2025

I know, that IntelliJ has that support for Java, in some capacity, but not sure about other languages

@LayZeeDK
Copy link
Author

LayZeeDK commented Aug 8, 2025

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.

@LayZeeDK
Copy link
Author

LayZeeDK commented Aug 8, 2025

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.

@jeserkin
Copy link

jeserkin commented Aug 11, 2025

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.

@Clindbergh
Copy link

Clindbergh commented Oct 22, 2025

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.

Unfortunately this rule will not fix the ordering automatically and only indicate erroneous ordering. Automatic ordering used to be a thing in now deprecated tslint, but will not arrive in typescipt-eslint. Furthermore the member-ordering rule is frozen and will not accept any extensions.

There is this new, small prettier plugin that does some sorting, but it does not have this level of granularity.

I heard there is a VS Code plugin that might help. IDEA / PhpStorm cannot do this with typescript.

I'd be interested on other tools that can help with this ordering.

@LayZeeDK
Copy link
Author

LayZeeDK commented Oct 22, 2025

@Clindbergh

Try the groups option for the sort-classes rule in eslint-plugin-perfectionist as a replacement for @typescript-eslint/member-ordering. This is not aware of Angular-specific class members either.

@Clindbergh
Copy link

Clindbergh commented Nov 26, 2025

@LayZeeDK thanks!

I know now of three options, though none are aware of angular specifics.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment