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?

Answer 1

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

Answer 2

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