How to use material pagination in angular with mat-card?

Question

<div class="main-div">
 <mat-card class="main" *ngFor="let topics of topics">
  <mat-card-content>
   <div class="row">
     <div class="column left">
    <img class="responsive" src="https://newworldhub.com/api/assets/{{topics.profilePicture}}">
    <p>{{topics.name}}</p>
    <p>Posted {{Math.round(topics.dateDiff/1440)}}</p>
  </div>
  <div class="column middle text-in-tile">
    <h1 routerLink="{{topics.topicId}}"
        (click)="this.forumService.setPostToken(topics.topicId)">{{topics.topicSubject}}</h1>
    <p class="content">{{topics.topicContent}}</p>
  </div>
</div>
</mat-card-content>
</mat-card>
<mat-paginator [length]="100"
             [pageSize]="1"
             [pageSizeOptions]="[1, 10, 25, 100]">
</mat-paginator>
</div>

html ^^

export class TopicsComponent implements OnInit {

form: FormGroup;

topics: Topics[];

Math: Math = Math;


constructor(
            public forumService: ForumService, 
            public dataService: DataserviceService, 
            public metaService: Meta, 
            public titleService: Title) {
}

 ngOnInit() {
   this.forumService.getTopics().subscribe((topics: Topics[]) => {
   this.topics = topics;
   console.log(this.topics);
   });

   this.titleService.setTitle("Forum | New World Hub");
   this.metaService.updateTag({ name: 'description', content: 'Guides for every aspect of Amazons game New World'});
 }

}

I am curious how I would implement pagination with the way that I have my forum topics set up. I have found a few different ways on here but none of them pertain to the way that I currently store my data.

Answer 1

Your html code is fine then in the component declare the matPaginator and subscribe tha page observable:

import { MatPaginator } from '@angular/material/paginator';

export class TopicsComponent implements OnInit, AfterViewInit {

form: FormGroup;

topics: Topics[];

Math: Math = Math;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

constructor(
            public forumService: ForumService, 
            public dataService: DataserviceService, 
            public metaService: Meta, 
            public titleService: Title) {
}

 ngOnInit() {
//take just one value from the getTopics() for the first page
   this.forumService.getTopics().pipe(take(1)).subscribe((topics: Topics[]) => {
   this.topics = topics;
   console.log(this.topics);
   });

   this.titleService.setTitle("Forum | New World Hub");
   this.metaService.updateTag({ name: 'description', content: 'Guides for every aspect of Amazons game New World'});
 }

//the viewChild decorator return only in the ngAfterViewInit method
  ngAfterViewInit(){
    this.paginator.page.pipe(
     switchMap(() => {
       // do whatever with the current page size and page index
       const pageIndex = this.paginator.pageIndex
       const pageSize = this.paginator.pageSize

       // run getTopics() to your service with the current page index(make sure your functions supports it)
       return this.getTopics({page: pageIndex})
     })
    ).subscribe((topics) => {
      this.topics = topics
    })
  }

}