Try to search your question here, if you can't find : Ask Any Question Now ?

Angular ngFor show limit item and click to show next

HomeCategory: stackoverflowAngular ngFor show limit item and click to show next
kundan asked 2 weeks ago

I’m doing with ngFor but I want my ngFor to show just 3 items each page, and then when I click next it’ll show next 3 items on another page, which mean page 1 show 3 items (1,2,3) page 2 show 3 items (4,5,6) and so on, just like when we search Google and click next or ‘page 2’ to show more result on page 2.
I’m using slice but it’s not enough. I’m stucking with idea so I really need your help, also if you guys know some key word of this problem please let me know. Many thanks.

This is my *-component.html

<section class="commentSection">
  <div class="comment" *ngFor="let item of reviewComments | slice:0:3">
      <div class="text">
        <div class="textContent" [innerHTML]="item.contentcomment"></div>
      </div>
      <div class="info">
        {{item.nameReviwer}} | {{item.date}}
      </div>
    </div>
  </div>
</section>

This is my *-component.ts

getComments(bookId) { //get comment follow bookId
    this.bookService.getComment(bookId).subscribe(res => {
      console.log(res);
      this.reviewComments = res as ReviewComment[];
      console.log('List Comment: ', this.reviewComments);
    }, err => {
      console.log(err);
    });
}

This is my *.service.ts

getComment(bookId: string): Observable<any> {
        const headers = new HttpHeaders({ 'Content-type': 'application/json' });
        return this.http.get(environment.apiBaseUrl + '/getcmtbook/' + bookId, { headers: headers }).catch(err => {
          return Observable.throw(err);
        });
}
1 Answers
Best Answer
Matthias answered 2 weeks ago
Your Answer

14 + 19 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com