CODEWITHSUNDEEP
htmlangular
Juanker
Juanker

Reputation: 794

Insert space between a list in Angular4 and transform to link each element

I have an object with 'id' and 'name', and I want to get something like this on the html

Category1, Category2, Category3

I am trying with this:

<span *ngFor="let category of categories; let isLast = last" class="categories">
   {{category.name}}{{isLast ? '' : ', '}}
</span>

But I am getting this:

Category1,Category2,Category3

What I need to do to get spaces after the comma?

Upvotes: 0

Views: 3474

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You are doing exactly opposite check, check !isLast while adding ,

{{!isLast ? ',&nbsp;' : ''}}

Plunker Demo

Upvotes: 2

asmmahmud
asmmahmud

Reputation: 5054

You're doing the opposite what you're supposed to do. You should do this:

<span *ngFor="let category of categories; let isLast = last" class="categories"  >
    <span *ngIf="!isLast" [innerHTML]="category.name + ';&nbsp;'"></span>
     <span *ngIf="isLast" [innerHTML]="category.name"></span>
</span>

Or you can do this also:

    <span *ngFor="let category of categories; let isLast = last" class="categories"  >
        <ng-template *ngIf="!isLast else elseForLast">{{category.name}};&nbsp;</ng-template>
        <ng-template #elseForLast>{{category.name}}</ng-template>
   </span>

Upvotes: 1

Related Questions