Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular Style Guide: Sorting class members: section on sorting convention for class members #56521

Closed
wants to merge 1 commit into from
Closed

Angular Style Guide: Sorting class members: section on sorting convention for class members #56521

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions adev/src/content/best-practices/style-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -869,6 +869,42 @@ Use those signatures to flag spelling and syntax mistakes.
<docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>

<docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts" visibleRegion="example"/>

## Sorting class members

Specify class fields and variables in a specific order

### Sort class members
#### Style 10-01
**Do** sort class members and add fields and functions in a specific order

**Why**? <br />
This increases code readability and allows other developers to read and modify your code faster

Use the following order of groups to organize Angular components:
1. Private properties.
1. Data binding properties.
1. View and content properties.
1. UI properties.
1. Component API properties.
1. Constructor.
1. Lifecycle hooks.
1. Event handlers.
1. Component API methods.
1. 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` or `Output`. |
| Event handlers. | Methods used by the component template. |
| Lifecycle hooks | Methods implementing the `AfterContentChecked`, `AfterContentInit`, `AfterViewChecked`, `AfterViewInit`, `DoCheck` `OnChanges`, `OnDestroy`, or `OnInit` interfaces. |
| Private properties | Properties marked by `private` or `#`. |
| UI properties | Public properties used by the component template. |
| View and content properties | Properties decorated by `ContentChild`, `ContentChildren`, `ViewChild`, or `ViewChildren`. |


## Appendix

Useful tools and tips for Angular.
Expand Down