Angular2: pagination of a component with table

Question

I have an Angular2 module that show a table with some data retrieved from a webervice. Webservice give me 30 result per time (take an index as argument), so i need to implement on my module a sort of pagination where when user click on an index, module download new data and show it to user. For now i have this component:

<table border="1" style="width:100%" *ngIf="messages" >
   <tr>
      <th>Date</th>
      <th>Mesage</th>
   <tr>
   <tr  *ngFor="let message of messages">
      <td>{{message.sendDate}}</td>
      <td>{{message.text}}</td>
   </tr>
 </table>

export class MessageListComponent implements OnInit {
    messages: Message[];

    ngOnInit() {
        this.messages = [];

        this.myServices.getMessages('0').subscribe(
             messages => this.messages = messages,
             error => alert(error),
             () => console.log('ok')
        )
    }
}

getMessage param '0' give me first results, so for now i can show only 30 element. How can i paginate all?

Answer 1

this is what i use: in the component:

  ngOnInit(){
  this.exampleService.getAll(this.currentPage,10).subscribe(res=>{
                                                this.result=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));
}

next(){
        this.exampleService.getAll((++this.currentPage),10).subscribe(res=>{
                                                this.brandsList=res.content;
                                                this.pages= new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
}
previous(){
        this.exampleService.getAll((--this.currentPage),10).subscribe(res=>{
                                                this.brandsList=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
}

getPage(page:number){
        this.exampleService.getAll(page,10).subscribe(res=>{
                                                this.currentPage=page;
                                                this.brandsList=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
 }  

and in the template:

        <nav>
          <ul class="pagination">
            <li [class]="isFirst?'disabled':''" class="page-item"><a class="page-link btn"  (click)="previous()">precedent</a></li>
            <ul *ngFor="let page of pages; let i= index" class="pagination">
                    <li    [class]="i===currentPage?'active':''"     class="page-item active">
                                <a class="page-link btn"  (click)="getPage(i)" >{{i+1}}</a>
                    </li>
            </ul>
            <li [class]="isLast?'disabled':''" class="page-item"><a class="page-link btn" (click)="next()" >suivant</a></li>
          </ul>
        </nav>