Show more button in ngFor in angular2
19,847
Solution 1
You should use the below code
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<ul class="results-main-content">
<li class="right-results-section">
<ul class="_result-list">
<li class="result" *ngFor="let item of content">
{{item.colorName}}
</li>
</ul>
</li>
<li class="showmore">
<button class="show-more" (click)="getData()" [disabled]="counter>=content.length">
Show more
</button>
</li>
</ul>
</div>
`,
})
export class App {
name:string;
data = [...]; // refer plunker
content:any[]=new Array();
counter:number;
constructor() {
this.counter=0;
this.getData();
this.name = 'Angular2'
}
getData(){
console.log(this.counter + 'dat size'+this.data.length)
for(let i=this.counter+1;i<this.data.length;i++)
{
this.content.push(this.data[i]);
if(i%10==0) break;
}
this.counter+=10;
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Solution 2
You can use the slice pipe:
show = 5;
<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
{{searchResult.name}}
<button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">More</button>
</li>
See also
Solution 3
By modifying Günter Zöchbauer code, you can achieve this by looking at this example
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let tag of tags | slice:0:show; let i=index">
<a href="#" class="span-tag tag">{{ tag }}</a>
</li>
<div *ngIf="show < tags.length" (click)="increaseShow()">DropDown Button</div>
</ul>
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
show = 10;
tags = ['a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j'];
increaseShow() {
this.show += 10;
}
}
Author by
DingDong
Updated on July 12, 2022Comments
-
DingDong almost 2 years
I have a list of over 50 items. I would like to show only the first 10 items, and I would have a button that when clicked shows the next 10 items, and which clicked again, the next 10 items until all is shown.
<ul class="results-main-content"> <li class="right-results-section"> <ul class="_result-list"> <li class="result" *ngFor="let searchResult of searchResults"> {{searchResult.name}} </li> </ul> </li> <li class="showmore"> <button class="show-more"> <img class="more" src="_arrow-down.svg" alt="" /> </button> </li> </ul>
Is this possible to achieve in angular2?
If so, please enlighten me and the SO community.
Thanks
-
DingDong about 7 yearsHow would I ensure that it only shows 10 items on click?
-
Aravind about 7 yearssee the if condition inside the for loop
-
DingDong about 7 yearsI believe its not the condition in for loop. Its the condition that we assign in the
[diabled]
handler. -
DingDong about 7 yearsBecause when you click the button, its says that view al of it. But thats not what i want. What i want is to only show 10 items for every click that the suer does
-
DingDong about 7 yearsSo basically, by default the first 10 item should be shown. And when you click on the button, the next 10 item is shown. When click again, the next 10 item is shown.
-
DingDong about 7 yearsSo basically, for each click, you show the next 10 items until there is no more left
-
Aravind about 7 yearsLet us continue this discussion in chat.