Surplus space between the variable and dot in Angular, how can I clean up it?

Question

I have a condition block with ng-container in my Angular html template. The rendered html contains unexplained space for me, how can I work it around?

The template part:

                         <span>
                            <ng-container [ngSwitch]="languageService.currentLang">
                                <ng-container
                                    *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
                                </ng-container>
                                <ng-container
                                    *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
                                </ng-container>
                                <ng-container
                                    *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
                                </ng-container>
                            </ng-container>
                            <ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
                                <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                <ng-container [ngSwitch]="languageService.currentLang">&
                                    <ng-container
                                        *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
                                    </ng-container>
                                </ng-container>
                            </ng-container>
                            .</span>
                            <span
                                jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>

And the final html, that was generated is:

<div> 
   <span> <!----> <!----><!---->Mental arithmetics  <!----> <!---->  <!----><!----> <!---->&amp; <!----><!---->Speed reading  <!----> <!---->   .</span> 
   <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> 
</div>

Why do I have spaces between ...reading and dot?

UPD.

I tried not to use span, but I still us ng-container and still getting the spaces:

<div *ngIf="accessSubscriptionPlan.subjects[0]">
                                <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                <ng-container [ngSwitch]="languageService.currentLang">
                                    <ng-container
                                        *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
                                    </ng-container>
                                </ng-container>
                                <ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
                                    <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                    <ng-container [ngSwitch]="languageService.currentLang">&
                                        <ng-container
                                            *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
                                        </ng-container>
                                        <ng-container
                                            *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
                                        </ng-container>
                                        <ng-container
                                            *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                                .
                                <span
                                    jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>
                            </div>

and the output is:

<div> <!----> <!----><!---->Mental arithmetics  <!----> <!---->  <!----> . <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> </div>

Answer 1

The problem is with that the span is an inline element. That's why the parser keeps every white-space in it.

So every new line and tab and space will be trimed into 1 space.

Try using other element like div or so.

Here is the current version of the code that eliminates the whitespaces.