Angular - show hidden values from array list via button

Question

I'm working on a list of values in my web-app. There I'm facing the following problem:

app.component.html

This part of the code shows my array as a list:

<div class="body__tags">
  <ng-container *ngFor="let tag of tags; let i=index">
    <li class="tags__list" *ngIf="i<5" [label]="tag"></li>
  </ng-container>
</div>

Here I set limit of 5 values in my list. But sometimes there are more than 5 values in the array. How can I add a button "show all" and then display everything in that list?

app.component.ts

This is my ts code:

tags:any[]; 

splitTags() {
  if (this.data.tags != null) {
    this.tags = this.data.tags.split(";");
    console.log(this.tags)
  }
}

ngOnInit() {
  this.splitTags()
}

programoholic · Accepted Answer · 2020-04-08 09:58:47Z

3

Using *ngIf is not the best idea for such scenario. You should slice the array upto 5 and store into another variable. once User clicks on the button to show all the data, assign the entire array to the new variable.

for Example :

this.data = [1,2,3,4,5,6,7,8,9,10];
this.newData = data.slice(0,5);

then in the component.html file : ;

<div class="body__tags">
  <ng-container *ngFor="let tag of newData; let i=index">
    <li class="tags__list" [label]="tag"></li>
  </ng-container>
</div>

on button click you should assign entire data to newData variable.

 public showAll(){
      this.newData = this.data;
   }

Working demo

edited Apr 8, 2020 at 9:58

answered Apr 8, 2020 at 9:49

programoholic

5,2545 gold badges26 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

macintosh11 Over a year ago

thanks! Works well! What do I have to add to hide the others when I click again on the button?

programoholic Over a year ago

Again slice the data and assign to newData

macintosh11 Over a year ago

can you make an example?

programoholic Over a year ago

@macintosh11 you can introduce a boolean flag isAllVisible . When the flag is true , slice the array and assign to newData else assign the entire data. in the end toggle the isAllVisible flag value.

Shlok Nangia · Accepted Answer · 2020-04-08 09:43:50Z

-1

you can keep 5 in some variable and then on click of 'ShowAll()' you can increase the limit

answered Apr 8, 2020 at 9:43

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular - show hidden values from array list via button

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related