Angular 6 - Pagination

[graydiamond]

Ciao a tutti,
Mi sto imbattendo nel mondo di Angular e in particolar modo sto cercando di fare una paginazione usando ng-bootstrap.

Vi posto i componenti che ho creato

messaggi.component.ts

import { Component, OnInit } from '@angular/core';
import { MessaggiService } from '../services/messaggi.service';
import { Messaggi } from '../interfaces/messaggi';

@Component({
  selector: 'app-messaggi',
  templateUrl: './messaggi.component.html',
  styleUrls: ['./messaggi.component.css']
})
export class MessaggiComponent implements OnInit {

  numberPage:number;

  listaMessaggi : Messaggi[] = [];

  constructor(private serviceMessaggi: MessaggiService) {
    serviceMessaggi.listaMessaggiOutput.subscribe(
      (val:Messaggi[])=>{
        this.listaMessaggi.concat(val);
      }
    );
  }

  ngOnInit() {
    this.numberPage = 1;
  }

  async leggiMessaggi(){

    let username = "";
    const data = JSON.parse(localStorage.getItem('user'));
    if( data ){
      username = data['username'];
    }

    this.listaMessaggi = [];
    this.listaMessaggi = await this.serviceMessaggi.getMessaggi(username, "10", "0");

    console.log("Leggi Messaggi result: ");
    console.log("Risultato Messaggi" +JSON.stringify(this.listaMessaggi));
  }

}

messaggi.component.html

<div class="leggiMessaggi" >

  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Mittente</th>
        <th scope="col">Oggetto</th>
      </tr>
    </thead>

    <tbody *ngFor="let messaggio of listaMessaggi">
      <tr>
        <td>{{messaggio.mittente}}</td>
        <td>{{messaggio.oggetto}}</td>
      </tr>
    </tbody>
  </table>

  <app-pagination [number-page]="numberPage"></app-pagination>

</div>

pagination.component.html

<ngb-pagination (pageChange)="pageChanged($event)" [pageSize]="10" [collectionSize]="20" [(page)]="numberPage" [boundaryLinks]="true"></ngb-pagination>

<hr>

<pre>Pagina Corrente: {{numberPage}}</pre>

<hr>

pagination.component.ts

import { Component, OnInit, Input , Output, EventEmitter} from '@angular/core';
import { MessaggiService } from '../services/messaggi.service';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {

  @Input("number-page") numberPage: number;


  constructor(private service: MessaggiService) {
  }

   pageChanged(page) { 

   }

  ngOnInit() {
  }

}

Poi c'ho un messaggi.service.ts che contiene appunto la chiamata al servizio. Adesso vorrei fare in modo che al click sul numero della pagina, il metodo pageChanged di pagination.component.ts cambi i risultati in messaggi.component.
Come dovrei fare?Sposto tutta la logica di messaggi.component in pagination.component?O ci sta qualche altro modo?

Grazie mille e spero di esser stato chiaro.

[Fix87]

Domanda: come mai hai fatto un componente per il paginatore? E' lui stesso già un componente.

Venendo al tuo problema devi occupartene tu, nell' ngFor di fare lo slice della lista in base al numero di pagina e al numero di elementi da mostrare nella lista. Puoi vedere un esempio direttamente nel componente ngb-pagination sul sito ufficiale, sotto il tab Examples

[graydiamond]

Ciao Fix,
Grazie mille per la risposta . Avevo fatto un componente per capire un pò il passaggio di dati tra un componente e l'altro. Alla fine poi ho semplicemente aggiungo al mio messaggi.component il tag "<ngb-pagination> in modo tale da non avere problemi . Grazie ancora

[ciro78]

gray quando postil il codice sul forum usa il tag code piuttosto che la formattazione del tuo ide. non si vede nulla. come per l'altra discussione chiudo un occhio che sei nuovo....

[graydiamond]

Scusami tanto ciro,
La prossima volta farò più attenzione . Grazie ancora