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 <!----> <!----> <!----><!----> <!---->& <!----><!---->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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.