Angular 4 material pagination example

[Norbert Kunszt]

Hi!

I have a problem with the pagination. I use material and Angular 4, and the pagination component work, but my list not work well...

component html: 

<md-paginator   
    [length]="posts.length"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageEvent = $event">
</md-paginator>

<md-list>
    <md-list-item *ngFor="let post of posts | slice: paginationFrom(pageEvent) : paginationTo(pageEvent) ">
        <h3 md-line> {{post.title}} </h3>
        <p md-line> {{post.short_text}} </p>
        <p md-line class="demo-2"> {{post.created_at}} </p>
    </md-list-item>
</md-list>

 the component ts: 

posts: Array<Post> = [];
    getNewsurl: string;
    loader: boolean;
    pageEvent: PageEvent;
    pageSize = 10;
    pageSizeOptions: Array<number> = [5, 10, 25, 100];

  constructor(private http: HttpClient) {
    this.getNewsurl = 'http://***/api/ang4/news_list';
  }

  ngOnInit() {
      this.getNews();
      this.pageEvent = new PageEvent;
      this.pageEvent.pageIndex = 0;
      this.pageEvent.length = this.posts.length;
      console.log('pageEvent', this.pageEvent);

  }

  paginationFrom(pageEvent) {
    return ((pageEvent.pageIndex === 0) ? pageEvent.pageIndex : (pageEvent.pageIndex) * pageEvent.pageSize );
  }

  paginationTo(pageEvent) {
    return this.paginationFrom(pageEvent) + this.pageSize;
  }

  getNews() {
      this.loader = true;
      Customfn.promiseGet(this.http, this.getNewsurl).then(
          (data: any) => {
              this.posts = data.newsList;
              this.loader = false;
          },
          (error) => {
              alert('GetNews error, another info in console');
              console.log(error);
              this.loader = false;
          }
          );
  }

I create by an example, but not work prooperly. Can anyone help me? What is the best practice for this? Please give me an example.

Thanks for the help!

Norbi