How do I apply code styles to Angular template code in WebStorm?

Is there a way to define the order of Angular properties when using code reordering?

I'm looking for an option to define the order of HTML attributes used in Angular, such as *ngIf, [binding], (event), etc

Any help will be appreciated.


  • Go to "Preferences" or "Settings" from the main menu.
  • Navigate to "Editor" > "Code Style" > "HTML".
  • Click on the "Arrangement" tab.
  • Under "Attribute groups," click on the "Custom order" checkbox.
  • enter the properties in the preferred order

Hi Elena Pogorelova I cannot find "Attribute groups". I have latest version of Idea Ultimate and Webstorm (2023.2). Do I have to have any plugin to see such options under Arrangment tab?


It's not there in 2023.2, but you can define your own rules as described in Code Style. HTML | WebStorm Documentation (


Please sign in to leave a comment.