Angular Material: main component ts file for pagination sample

main.component.ts

import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {MatTableDataSource} from '@angular/material';

import {MainService} from './service/main.service';
 // this will be your shared component path
import {BasicPaginationComponent} from '../shared/components/basic-pagination/basic-pagination.component';

@Component({
    selector: 'main-component',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss'],
    provider: ['MainService']
})
export class MainComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild(BasicPaginationComponent, {static: true}) paginator: BasicPaginationComponent;
    private _unsubscribeAll: Subject<any>;
    isLoading = false; // show data table if it is false, here you may use a loader when it is true
    displayedColumns: string[] = ['name', 'email'];
    dataSource: MatTableDataSource<any>; // mat table data source
    // for pagination
    total: any;
    pageOffset: any;
    pageIndex: any;
	
    constructor(private _service: MainService) {
        this._unsubscribeAll = new Subject();
    }
	
    ngOnInit(): void {
		this.isLoading = true;
		this.pageOffset = 10;
		this.pageIndex = 1;
		this.orderBy = 'desc';
	}
	
	// call the service for http call
	getValues(): void {
		this.isLoading = true;
		this._service.getAll(this.pageOffset, this.pageIndex, this.orderBy)
			.pipe(takeUntil(this._unsubscribeAll)).subscribe(res => {
				this.dataSource = new MatTableDataSource(res.data);
				this.total = res.meta.total;
				this.isLoading = false;
		});
	}
	
	ngAfterViewInit(): void {
		// after paginate state update in pagination component
		this.paginator.paginate.pipe(takeUntil(this._unsubscribeAll)).subscribe(paginator => {
			this.pageIndex = paginator.page;
			this.pageOffset = paginator.pageOffset;
			this.getValues();
		});
	}
	
	ngOnDestroy(): void {
		// Unsubscribe from all subscriptions
		this._unsubscribeAll.next();
		this._unsubscribeAll.complete();
	}
}