CODEWITHSUNDEEP
angularangular6angular-elements
MortenMoulder
MortenMoulder

Reputation: 6648

Angular Elements produces HTML all on one line

This is extremely annoying. As many of you probably know, there is a "bug" with browsers, that treat inline-block elements kind of weird. If you place two inline-block elements next to each other, they will have an invisible margin, as you can see here: http://jsfiddle.net/8o50engu/

However, if they were on the same line, the weird space would disappear: http://jsfiddle.net/8o50engu/1/

If I make an Angular Elements application (see the app.module.ts file in the StackBlitz link below), my HTML from my component is all on one line. This means that the HTML I write is different from the output. You can see an example here: https://stackblitz.com/edit/angular-fowosb?file=src%2Fapp%2Fapp.component.html

As you can see, my elements are clearly on separate lines:

<div>
  <span>
    span#1
  </span>
  <span>
    span#2
  </span>
</div>

However, the output is on one line:

This works fine in a regular Angular application (not Angular Elements), so clearly it's a problem with Angular Elements.

Is there a way to disable this in Angular Elements? It fixes the problem I explained in the beginning, but it's not what I want. I want my HTML to output as I wrote it.

Upvotes: 0

Views: 1169

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73731

That rendering behavior is controlled by the preserveWhitespaces Component decorator option. The white spaces will be preserved in the HTML output if you set the option to true, as shown below and as you can see in this stackblitz. By default, preservedWhitespaces is false.

@Component({
  ...
  preserveWhitespaces: true
})
export class MyComponent {
}

Upvotes: 3

Related Questions