Pagination Component

list.component.html

<div>list of things</div>
<my-pagination
  (goPage)="goToPage($event)"
  (goNext)="onNext()"
  (goPrev)="onPrev()"
  [pagesToShow]="3"
  [page]="page"
  [perPage]="limit"
  [count]="total"></my-pagination>

list.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'my-message-list',
  templateUrl: './message-list.component.html',
  styleUrls: ['./message-list.component.scss']
})
export class MessageListComponent implements OnInit {
  messages: Message[];

  loading = false;
  total = 0;
  page = 1;
  limit = 20;

  constructor(private messageService: MessageService) {
  }

  ngOnInit(): void {
    this.getMessages();
  }

  getMessages(): void {
    this.loading = true;
    this.messageService.getMessages({ page: this.page, limit: this.limit }).subscribe(res => {
      this.total = res.total;
      this.messages = res.messages;
      this.loading = false;
    });
  }


  goToPage(n: number): void {
    this.page = n;
    this.getMessages();
  }

  onNext(): void {
    this.page++;
    this.getMessages();
  }

  onPrev(): void {
    this.page--;
    this.getMessages();
  }
}

pagination.component.html

<div class="pagination" *ngIf="count > 0">
	<div class="description">
		<span class="page-counts">{{ getMin() }} - {{ getMax() }} of {{ count }}</span>
		<span class="page-totals">{{ totalPages() }} pages</span>
	</div>
	<div class="numbers">
		<button class="link" (click)="onPrev()" [disabled]="page === 1 || loading" [ngClass]="{ 'disabled': page === 1 || loading }">&lt; Previous</button>
		
		<button
			*ngFor="let pageNum of getPages()"
			(click)="onPage(pageNum)"
			[ngClass]="{'active': pageNum === page, 'disabled': loading}">{{ pageNum }}</button>

		<button class="link" (click)="onNext(true)" [disabled]="lastPage() || loading" [ngClass]="{ 'disabled': lastPage() || loading }">Next &gt;</button>
	</div>
</div>

pagination.component.scss

// fix these imports to match your imports
@import '~vars';
@import '~typography';

:host {
	flex: 0 0 30px;
	display: flex;
	.pagination {
		width: 100%;
		position: relative;
		flex: 1;
		background: $grey50;
		display: flex;
		flex-direction: row;
		align-items: center;

		.description {
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			left: $base;

			.page-counts {
				margin-right: $base * 2;
			}
		}

		.numbers {
			display: block;
			text-align: center;
			flex: 1;

			button {
				flex: 0 0 auto;
				outline: none;
				border: 0;
				padding: 0 ($base / 2);
				background: transparent;
				cursor: pointer;

				&.active {
					@extend .h6;
				}

				&.disabled {
					@extend .link-disabled;
					color: $lightgrey;
				}
			}
		}
	}
}

pagination.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'my-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent {
  @Input() page: number;
  @Input() count: number;
  @Input() perPage: number;
  @Input() loading: boolean;
  @Input() pagesToShow: number;

  @Output() goPrev = new EventEmitter<boolean>();
  @Output() goNext = new EventEmitter<boolean>();
  @Output() goPage = new EventEmitter<number>();

  constructor() { }

  getMin(): number {
    return ((this.perPage * this.page) - this.perPage) + 1;
  }

  getMax(): number {
    let max = this.perPage * this.page;
    if (max > this.count) {
      max = this.count;
    }
    return max;
  }

  onPage(n: number): void {
    this.goPage.emit(n);
  }

  onPrev(): void {
    this.goPrev.emit(true);
  }

  onNext(next: boolean): void {
    this.goNext.emit(next);
  }

  totalPages(): number {
    return Math.ceil(this.count / this.perPage) || 0;
  }

  lastPage(): boolean {
    return this.perPage * this.page > this.count;
  }

  getPages(): number[] {
    const c = Math.ceil(this.count / this.perPage);
    const p = this.page || 1;
    const pagesToShow = this.pagesToShow || 9;
    const pages: number[] = [];
    pages.push(p);
    const times = pagesToShow - 1;
    for (let i = 0; i < times; i++) {
      if (pages.length < pagesToShow) {
        if (Math.min.apply(null, pages) > 1) {
          pages.push(Math.min.apply(null, pages) - 1);
        }
      }
      if (pages.length < pagesToShow) {
        if (Math.max.apply(null, pages) < c) {
          pages.push(Math.max.apply(null, pages) + 1);
        }
      }
    }
    pages.sort((a, b) => a - b);
    return pages;
  }
}

import { MessageService } from './message.service';
messages: Message[];

how to define message service file???
thanks.