Angular: Prevent additional whitespaces in template

Question

I have a html template which should simply translate a state:

<ng-container [ngSwitch]="currentStatus">
  <ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
    Draft
  </ng-container>
  <ng-container *ngSwitchCase=    ...
  <ng-container *ngSwitchDefault>
    {{currentStatus}}
  </ng-container>
</ng-container>
. End

But somehow as much as I try the content is always displayed as e.g. Draft . End. i.e. one additional space is added at the end of the container. I would like to display it like Draft. End.

Trying to use in the compontent the setting preserveWhitespaces: false, doesn't help neither.

Any hints how to get rid of this extra space?

Maybe that you have an additionnal space after Draft or End. Try inlining the tag: <ng-container *ngSwitchDefault> {{currentStatus}}</ng-container> and see if you still have the trailing space — edkeveked
– edkeveked, Commented Sep 4, 2019 at 13:58

LeO · Accepted Answer · 2020-12-27 16:47:50Z

5

You have necessarily a white space that you do not see. To be sure you can wrap your words in <span> like :

...
<ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
   <span>Draft</span>
</ng-container>
...
<span>. End</span>

And be sure that you do not have space between your tags

edited Dec 27, 2020 at 16:47

LeO

5,4016 gold badges64 silver badges116 bronze badges

answered Sep 4, 2019 at 13:58

bubbles

2,7271 gold badge20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LeO Over a year ago

Yeah, that's the best approach to fix this issue on a long run. I don't want to rely on any special formatting within HTML - cuz my editor might mess it up. Thx.

kshetline · Accepted Answer · 2019-09-04 13:56:58Z

1

You might not like this formatting (or perhaps you have auto-format on save set up, which would have to be disabled somehow), but this should solve the problem:

<ng-container [ngSwitch]="currentStatus">
  <ng-container *ngSwitchCase="'DRAFT'" i18n="@@DraftStatus">
    Draft</ng-container>
  <ng-container *ngSwitchCase=    ...
  <ng-container *ngSwitchDefault>
    {{currentStatus}}
  </ng-container>
</ng-container>. End

answered Sep 4, 2019 at 13:56

kshetline

14k6 gold badges49 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angular: Prevent additional whitespaces in template

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related