How to show 1 element in ngFor in angular2?

Question

I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work.

<li *ngFor="let tag of module.Tags; let i = index">
  <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
  <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
</li>

The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags which will be used to show the dropdown with the remaining tags.

Is this possible to do in angular2?

If so, please enlighten me.

Solution

<li *ngFor="let tag of module.Tags | slice:0:5; let last=last">
  <a href="#" class="span-tag tag">{{ tag }}</a>
  <div *ngIf="last">DropDown Button</div>
</li>

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

To get all added but the <div>DropDown Button</div> added after the 5th item you can use:

show = 5;

<li *ngFor="let tag of module.Tags|slice:0:show let i=index">
  <a href="#" class="span-tag tag">{{ tag }}</a>
  <div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">DropDown Button</div>
</li>

Comments

[DingDong]

But this is only showing this: <div *ngIf="last">DropDown Button</div>, not the first 5 tags

[Günter Zöchbauer]

Sorry, forgot to remove the *ngIf="i <5"

[DingDong]

Ah I see. And will this allow me to put the rest of tags in dropdown? meaning the rest of tags after the first 5?

[Günter Zöchbauer]

Seems I misunderstood your question then and your "yes" to my comment. If you just want to add the <div> after the 5th item that's easy. I'll update my answer.

[DingDong]

So in your updated answer, what's happening is that its viewing the first 6 tags, then a drop-down box, and then the rest tags. What I want to see is the first 5 tags, followed by a button, in which when the user clicks, the rest shows, otherwise the rest is hidden

[Günter Zöchbauer]

I updated my answer. Perhpas this is what you want. Not entirely sure the slice pipe will work this way to show all after the click, but I guess so.

[DingDong]

Hmmm, your right, the pipe didnt work. Now all it shows is the first 5 tags. But not the button, because I would need the button to click and show the rest of tags

[Günter Zöchbauer]

I updated again (the code in the (click)="..." handler)

[DingDong]

The thing is, your absolutely going in the right direction, but the issue is that button "dropdown button" is not visible. It shows the first 5 tags which is good

[DingDong]

Perhaps its something to do witht he if condition. Let me increase the i to i == 5 && show === 5

[DingDong]

Spot on Mate, you just had to do this i == 3

[tschaka1904]

Exactly what I was looking for! Thanks! Could you remove the extra double quote from the first example last="last" and a space in the second example, between show and let. slice:0:showlet i=index".