CODEWITHSUNDEEP
javascripthtmlangulartypescript
Lulesi
Lulesi

Reputation: 19

Angular - Load more items into list

I'm new with Angular and I'm trying to do something like a loadMore or ShowMore button on my project, I'm stuck here so with u guys know something to help me I'll appreciate a lot.

I have a list with 10 elements, if my user has more than 10, we will have a showMore Button to click and load these other guys.

I'm trying to thing how to do this, but it's my first project and i'm confused about that.

<div fxFlex fxLayout="row" fxLayoutAlign="center center" style="padding-top: 16px;">
<button (click)="showMore()" mat-button color="accent" style="width: 100%" value="bold">Show More</button>
</div>

showMore(){

this.pageSize = this.pageIndex + 1;

this.get(10, this.pageIndex, 'Recents'); 
}

Until this moment i'm trying to change the current pageIndex and move to the next with the other elements. my Index starts is 0. and the 'Recents' is my reports Status to filter.

Upvotes: 1

Views: 3050

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

Template:

<div *ngFor="let item of items">
  msg{{item}}
</div>

<input type="button" (click)="LoadMore()" value="showMore">

Component:

currentIndex = 10;
items = [...Array(currentIndex).keys()];

constructor(private crd: ChangeDetectorRef){}

LoadMore(){
  currentIndex += 10;
  this.items = [...Array(currentIndex).keys()];
  this.cdr.detectChanges();
}

Upvotes: 1

Related Questions