Angular HTML templates indent size

Hi. Please help me with finding information about the reformat angular template.

When I reformat the html template with angular attributes, the next constructions like:

```
<div
    #container
    class="flex"
></div>
```
or 

```
<ng-template
    #menuGroupTemplate
    let-items="items"
>
  <div class="menu-group">…</div>
</ng-template>
```

rearrange my attributes with 4 spaces, but in the settings, and even in .editorconfig I have an indent size of 2 for html documents.

How can I set up my IDE so that the indent size remains always the same and thus for both element references and default html attributes?

0
8 comments

What IDE version do you use? Also, do you have Prettier configured for your project in Settings | Languages & Frameworks | JavaScript | Prettier?

0

I'm always using latest version of WebStorm. And I don't use Prettier in my project

0

Does disabling editorconfig support make any difference?

Note also that attributes are indented according to Continuation indent settings (Settings | Editor | Code Style | HTML | Tabs and Indents, Continuation indent:)

0

I found the problem. I have different indent sizes for javascript and html. For javascript, it is 4, for html is 2. And when I changed the indent size for javascript to 2 also, all my problems went away. It's wrong logic because I think javascript indent size should not affect html documents. Should I create a request for this problem?

0
It doesn't affect the HTML indents for me. As I wrote, attributes in angular templates are indented according to 
Settings | Editor | Code Style | HTML | Tabs and Indents, Continuation indent preferences
0

You are right.  Ordinary attributes like class, type, even (click) and formControlName indented according to html settings. But if I declares DOM elements as variables, for example:
<div
    #container
    class="flex"
></div>
then attributes of such element start to indented according to javascript rules that you can find at Settings | Editor | Code Style | JavaScript | Tabs and Indents, Continuation indent preferences

0
Thank you for your help in investigating the issue. I managed to reproduce the problem and have created a new ticket: https://youtrack.jetbrains.com/issue/WEB-63271/Angular-template-reference-variables-should-be-indented-according-to-HTML-code-style-settings-in-templates. Please vote for it to get notified on any progress
1

Thanks for your help

0

Please sign in to leave a comment.