Atualização de Array entre componentes

Ola boa tarde , depois de fazer o curso de Angular 6 e os execícios , estou testando meus conhecimentos em um projeto próprio.

Assim estou com uma duvida .

Meu cenário :

tenho 2 arrays .

dpCategoriaFaqD:CategoriaFaq[] = [];
dpCategoriaFaqR:CategoriaFaq[] = [];

estes 2 arrays , guardam as categorias Disponíveis e relacionadas de um artigo. trazidos da api , exibidos dentro de um table , onde o usuário pode adicionar ou remover entre as tabelas as categorias que deseja.

E tudo isso funciona perfeitamente.

Porem para não ficar um lista muito grande na pagina , resolvi implementar um componente de paginação

<cp-table [vExibeTabel]='!!vRegArtigo.CODARTIGO_FAQ'   
[vColuna]="tbCategoria" >

                        <tbody style="min-height: 100px;"> 
                            <tr class="bg-light" *ngFor="let inf of fGetTabelaCategoria(PagCatD.fGetPagina(),'D')">

                                <th scope="row">{{inf.DESCRICAO}}</th>

                                <td class="float-right">
                                        <button class="btn btn-xs btn-success btn3d   " (click)="fInsertCategoria(inf.CODCATEGORIA_FAQ)">
                                                <i class="fa fa-pencil "></i>
                                        </button>

                                </td>
                            </tr>
                    </tbody>
                </cp-table>
                <div class="  text-center alert alert-danger" *ngIf="!dpCategoriaFaqD.length>0">
                        Não exist

e registro!
                </div>
                <cp-paginacao [exibe]="true" [dpPagina]="dpCategoriaFaqD"  #PagCatD></cp-paginacao>

export class PaginacaoComponent implements OnChanges  {
     @Input() dpPagina = [];
     @Input() exibe : boolean = true;
    _dpPagina = [];
    //@Output() pagselec = new EventEmitter<string>();

    private _PaginaSelecionada = '0';

    ngOnChanges(changes: SimpleChanges): void {

         if(changes.dpPagina){

            this._dpPagina = this.fListaTabela(this.dpPagina);
         } 
    } 


    fSelecinaPag(pag){
        this._PaginaSelecionada = pag;
        //this.pagselec.emit(pag);
    }

    fGetPagina():string{
        return this._PaginaSelecionada;
    }

    fListaTabela (dp:any){
        const _dp=[];
        for (let i = 0; i < dp.length; i+=5) {
            _dp.push(dp.slice(i,i+5));
        }
        return _dp;
    }

E meu problema é que guando eu realizo um push direto do que alimenta o dp da paginação não atualiza .

Para contornar meu problema , métodos do serviço.

//metodo do componente 
      this.vAlert.success('Adicionado Categoria do Artigo com Sucesso!');
                    this.dpCategoriaFaqD = this.categoria.fRemoveCategoria(this.dpCategoriaFaqD,vCOD);
                    this.dpCategoriaFaqR = this.con.fAtualizaDp(this.dpCategoriaFaqR,this.vRegCatD);

// metodo do serviço categoria     
     fRemoveCategoria(dp,VALOR){
         var vReg = dp.filter(function(elem){
             if(elem.CODCATEGORIA_FAQ != VALOR){
                return elem;
             }
          });

          if(vReg!=undefined){
              return <CategoriaFaq> vReg;
          }

          return dp;
     }

// metodo de um serviço global que tenho utilizado paa resolver 
meu problema. 
fAtualizaDp(dp,vReg){
    var _dp = dp.filter(function(elem){
         return elem;
    });

    if(vReg!=null){
        _dp.push(vReg);
    }



    return _dp;
}

Então somente dessa maneira , eu consigo atualizar o meu da tabela e o da paginação e estes trabalharem simultaneamente.

Porem assim por mais que resolva , ta uma gambiarra e assim gostaria de saber qual seria melhor tecnica para que eu possa da um " refresh" no meu array e ele atualizar os componetes sem a necessidade dessa volta toda que eu estou dando.