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.