Componente para paginação em angular 6

    import { Injectable, EventEmitter } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class PaginacaoService {

      public static modelo = new EventEmitter<any>();
      public static primeiraPagina = new EventEmitter<any>();
      public static paginaAnterior = new EventEmitter<any>();
      public static proximaPagina = new EventEmitter<any>();
      public static ultimaPagina = new EventEmitter<any>();
      public static paginaAtual = new EventEmitter<any>();
      public static totalPagina = new EventEmitter<any>();
      public static totalRegistros = new EventEmitter<any>();
    }

    import { Component, OnInit } from '@angular/core';

    import { PaginacaoService } from '../../../service/paginacao/paginacao.service';

    @Component({
      selector: 'app-paginacao',
      templateUrl: './paginacao.component.html',
      styleUrls: ['./paginacao.component.css']
    })
    export class PaginacaoComponent implements OnInit {

      public totalPagina: number;
      public totalRegistros: number;
      public paginaAtual: number;

      public modelo: any;

      constructor(
        protected paginacaoService: PaginacaoService
      ) {}

      ngOnInit() {
        this.preencherVariaveisComponente();
      }

      private preencherVariaveisComponente() {
        PaginacaoService.paginaAtual.subscribe(
          paginaAtual => {
            this.paginaAtual = paginaAtual;
          }
        );
      }
    }

    Página <b>{}</b> de <b>{}</b> - 
              Total de Registros: <b>{}</b>

<img src="http://www.guj.com.br/uploads/default/original/3X/4/5/4564a54bd0945e1954304613baf9c66531f293ce.png" />

    this.paginaAtual = 1;
        PaginacaoService.paginaAtual.subscribe(
          paginaAtual => {
            this.paginaAtual = paginaAtual;
          }
        );