Componente para paginação em angular 6

[guilhermecostalopes]

Tenho este componente que tenho que repetir em todos que precisa de uma paginação, assim duplicando códigos.

Código HTML

<mat-card-content *ngIf="mostrarPesquisa">
        <div class="mat-paginator-outer-container" style="align-content: left">
          <div class="mat-paginator-container">
            <div class="mat-paginator-range-actions">
              <div class="mat-paginator-range-label">Página <b>{{paginaAtual}}</b> de <b>{{totalPagina}}</b> - 
                Total de Registros: <b>{{totalRegistros}}</b>

                <button class="mat-paginator-navigation-previous mat-icon-button" mat-icon-button="" 
                  type="button" aria-describedby="cdk-describedby-message-25" cdk-describedby-host="" 
                  matTooltip="Primeira página" style="touch-action: none; user-select: none; 
                  -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                  (click)="paginaAnterior()">
                  <span class="mat-button-wrapper">
                    <mat-icon>first_page</mat-icon>
                  </span>
                  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
                  <div class="mat-button-focus-overlay"></div>
                </button>

                <button class="mat-paginator-navigation-previous mat-icon-button" mat-icon-button="" 
                  type="button" aria-describedby="cdk-describedby-message-25" cdk-describedby-host="" 
                  matTooltip="Página anterior" style="touch-action: none; user-select: none; 
                  -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                  (click)="paginaAnterior()">
                  <span class="mat-button-wrapper">
                    <mat-icon>chevron_left</mat-icon>
                  </span>
                  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
                  <div class="mat-button-focus-overlay"></div>
                </button>

                <button class="mat-paginator-navigation-next mat-icon-button" mat-icon-button="" type="button" 
                  aria-describedby="cdk-describedby-message-26" cdk-describedby-host="" 
                  matTooltip="Próxima página" matTooltipPosition="below" 
                  style="touch-action: none; user-select: none; -webkit-user-drag: none; 
                  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                  (click)="proximaPagina()">
                  <span class="mat-button-wrapper">
                    <mat-icon>chevron_right</mat-icon>
                  </span>
                  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
                  <div class="mat-button-focus-overlay"></div>
                </button>

                <button class="mat-paginator-navigation-next mat-icon-button" mat-icon-button="" type="button" 
                  aria-describedby="cdk-describedby-message-26" cdk-describedby-host="" 
                  matTooltip="Última página" matTooltipPosition="below" 
                  style="touch-action: none; user-select: none; -webkit-user-drag: none; 
                  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                  (click)="proximaPagina()">
                  <span class="mat-button-wrapper">
                    <mat-icon>last_page</mat-icon>
                  </span>
                  <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
                  <div class="mat-button-focus-overlay"></div>
                </button>


              </div>
            </div>
          </div>
        </div>
      </mat-card-content>

Código TS, que todos extends:

  public paginaAnterior() {
    this.modelo.paginaAtual = this.paginaAtual - 1;
    if (this.modelo.paginaAtual !== 0 && this.modelo.paginaAtual <= this.paginaAtual) {
      this.pesquisar(false);
    }
  }

  public proximaPagina() {
    this.modelo.paginaAtual = this.paginaAtual + 1;
    if (this.paginaAtual < this.totalPagina) {
      this.pesquisar(false);
    }
  }

Criei um componente com o nome paginacao, e assim em todos os htmls, informei a tag < app-paginacao></ app-paginacao>, mostrando o html. Mas sem ação.

Criei um service, para fazer funcionar as ações, mas não consegui. Segue o código:

export class PaginacaoService {

  public modelo = new EventEmitter<any>();

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

  public modeloFormulario(modelo: any) {
    this.modelo.emit(modelo);
  }

  public primeiraPaginaFormulario() {
    this.primeiraPagina.emit();
  }

  public paginaAnteriorFormulario() {
    this.paginaAnterior.emit();
  }

  public proximaPaginaFormulario() {
    this.proximaPagina.emit();
  }

  public ultimaPaginaFormulario() {
    this.ultimaPagina.emit();
  }

  public paginaAtualFormulario() {
    this.paginaAtual.emit();
  }

  public totalPaginaFormulario() {
    this.totalPagina.emit();
  }

  public totalRegistrosFormulario() {
    this.totalRegistros.emit();
  }

O que está faltando ?

[guilhermecostalopes]

Estou fazendo assim:

paginacao.service.ts

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>();
}

paginacao.component.ts

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 {

  /**
   * variáveis de paginação
   */
  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;
      }
    );
  }
}

paginacao.component.html

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

A variável nunca é atualizada, mesmo o serviço trazer o valor, conforme imagem:

Se preencho valor assim:

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

Funciona, mas se o valor vier pelo servico, conforme imagem, não funciona. O que pode ser ?