html formatting obscures hierarchy in some cases

[karptonite]

Prettier 1.15.2
Playground link

Input:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess">
    <gg-downloadable-file [file]="file"></gg-downloadable-file>
  </gg-inline-editable-text><span *ngIf="file.filepageid !== filepage.filepageid">Moved to: 
    <gg-item-link [apiId]="{type: 'filepages', id: file.filepageid.toString()}"></gg-item-link></span>
</h3>

Output:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess"
  >
    <gg-downloadable-file
      [file]="file"
    ></gg-downloadable-file> </gg-inline-editable-text
  ><span *ngIf="file.filepageid !== filepage.filepageid"
    >Moved to:
    <gg-item-link
      [apiId]="{ type: 'filepages', id: file.filepageid.toString() }"
    ></gg-item-link
  ></span>
</h3>

Expected behavior:

<h3 class="timeline-title">
  <gg-inline-editable-text
    [value]="file.filename"
    (updateValue)="saveFilename($event)"
    [hasEditAccess]="hasEditAccess"
  >
    <gg-downloadable-file
      [file]="file"
    ></gg-downloadable-file>
  </gg-inline-editable-text><span 
      *ngIf="file.filepageid !== filepage.filepageid"
    >Moved to:
    <gg-item-link
      [apiId]="{ type: 'filepages', id: file.filepageid.toString() }"
    ></gg-item-link
  ></span>
</h3>

This is an example from our code. I've included a much larger example in the prettier playground link. There are a few things here that members of our team find ugly, but the biggest issue is the indenting of the closing tag of the </gg-inline-editable-text> element. Including it inline after the </gg-downloadable-file> tag makes it hard to see the hierarchy of the file. Inlining elements when everything fits on one line seems sensible, but otherwise, when working with html, being able to see the hierarchy is important.

(Separately, and if there is interest in this, I could open another issue, one team member (the boss) has said he hates the dangling closing > that are alone on a line, and would prefer to see them on the previous line. in his words, "I've never seen it done like that in 20+ years." The dangling >'s don't bother me, although they aren't exactly pretty; it would make it hard to see when the tag ends and other content begins if the the > were simply moved to the previous line. But this is in part because there is a single indent width for both the contents of a tag additional content after a closing tag. Perhaps if wrapped attributes were indented to double the standard indentation, those closing >'s could hug the previous line?)

[thorn0]

As Angular removes whitespace-only text nodes, for now, you can kind of work around this problem manually adding whitespace between tags here and there. E.g. between </gg-inline-editable-text> and <span>.

[paulheising]

Also occured to me:

Input:

<markdown [class.big-initial]="showBigInitial"><ng-content></ng-content></markdown>

Actual Output:

<markdown [class.big-initial]="showBigInitial"
  ><ng-content></ng-content
></markdown>

Why does it put the closing > of the markdown and the ng-content tag in the next line?

Expected Output would be:

<markdown [class.big-initial]="showBigInitial">
  <ng-content></ng-content>
</markdown>

[karptonite]

@pmattke I think that is because your version would add meaningful whitespace before and after the ng-content tag.

[karptonite]

This is an old issue, but it continues to be a problem with prettier 2.5.1.
Playground

[karptonite]

Again, this is an old issue, but it remains a problem ins prettier 2.6.1:
Playground