import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { BASE_URL = 'http://localhost:3000'; // MatPaginator Inputs paginationInfo; pageSizeOptions: number[] = [5, 10, 25, 100]; // Test states EmitResult = { pageNumber: '', pageSize: '' }; testPaginator = { length: 1000, pageSize: 10, pageIndex: 1 }; // states tableData; constructor(private httpClient: HttpClient) { this.getPageDetails(); } setPageSizeOptions = (setPageSizeOptionsInput: string) => { if (setPageSizeOptionsInput) { this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); } } ngOnInit(): void { // Called after the constructor, initializing input properties, and the first call to ngOnChanges. // Add 'implements OnInit' to the class. this.getPageDetails(); // this.getPageDetails(); } onPageEvent = ($event) => { this.getData($event.pageIndex, $event.pageSize); } showTestEmit = ($event) => { this.EmitResult = { pageNumber: $event.pageIndex, pageSize: $event.pageSize }; } getPageDetails = () => { this.getPageSize().subscribe( res => { this.paginationInfo = res; this.getData(0, this.paginationInfo.pageSize); }); } getData = (pg, lmt) => { return this.allProjects(pg, lmt).subscribe( res => { this.tableData = res; }); } allProjects = (page, limit) => { return this.httpClient.get(`${this.BASE_URL}/posts?_page=${page + 1}&_limit=${limit}`); } getPageSize = () => { return this.httpClient.get(`${this.BASE_URL}/pageSize`); } }