CODEWITHSUNDEEP
cssangularangular6
CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4527

Whitespace characters stripped from ng-container content

After upgrading from Angular 5 to 6 the following no-longer renders as expected.

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
</ng-container>

What used to happen is that these tags would appear on a line until they reached the end, then continue on the next line (without breaking in the middle of a tag)

I used an ng-container because just placing ng-for inside the span would not add a CR/LF after the tag, and would render in a continuous line without wrapping.

However, the latest version seems to remove all whitespace characters between the tags, even if I add them manually, e.g.:

This has HTML encoded CRLF that is not rendered

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#13;&#10;
</ng-container>

This has definite newlines between the <span> elements but these do not appear in the rendered output.

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    <span> </span>
</ng-container>

There is a bit of styling that might be relevent as follows:

span.email-tag {
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

If I manually edit the DOM and add a CRLF or even just a space, I get exactly the result I'm after.

I suspect this was changed to fix some issue somewhere, but does anyone have any suggestions as to how I can achieve the desired result?

Upvotes: 0

Views: 2505

Answers (2)

Daniel Crisp
Daniel Crisp

Reputation: 2025

Angular 6 enables whitespace optimisation by default. After upgrading I noticed that spaces between icons and text had disappeared for example.

You can override this globally (if you are using Angular CLI) by setting the preserveWhitespaces option in your tsconfig.app.json:

"angularCompilerOptions": {
    "preserveWhitespaces": true
}

Or on a per-component-basis, using the decorator:

@Component({
    selector: 'floor-plan',
    templateUrl: './floor-plan.component.html',
    styleUrls: ['./floor-plan.component.scss'],
    preserveWhitespaces: true
})
export class FloorPlanComponent implements OnInit, OnDestroy {
    ...

For more information see:

Docs: https://angular.io/api/core/Component#preserveWhitespaces

Explanation: http://thomasgassmann.net/whitespace-handling-in-angular-6/

Upvotes: 3

CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4527

Someone here gave me a workaround even before I'd clicked "Ask your question".

What I did was to add a zero-width space to the content. For some reason (which I'm very grateful for!) Angular doesn't strip this from the container content like it now does with whitespace, so the output renders as expected.

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#8203;
</ng-container>

Upvotes: 1

Related Questions