pagination-controls does not appear until i click on my modal

Question

I am trying to make pagination through angular and it works perfect if I click first on the modal with data-target="#myModal. Otherwise I don't see it.

I attach both screenshots Before clicking on the modal

After Clicking on It

This is my html code, I reviewed it several times but i still don't get why it does not work until I click on the modal written before

<div class="container-fluid">
<div class="row">
  <div class="col">
  <h2>Clientes</h2>
  </div>

<br>
<button class="btn btn-danger btn-rounded" (click)="mostrarInsertar()">Crear nuevo cliente</button>
<br>
<!-- <button (click)="actualizarCliente()">Actualizar Cliente</button> -->
<!-- <button (click)="mostrarInsertar()">Borrar Cliente</button> -->

</div>
<div class="row">
  <input type="text" placeholder="Escriba la letra a buscar" id="letraBuscar" class="form-group" style="margin-left: 180px"><br>
<button class="fa fa-search" (click)="buscarCliente()"></button>
</div>

<div class="col" id="tabla">
  <li >
    <table class="table table-border">
      <thead>
        <tr class="table-danger"> 
          <th scope="col">Id Cliente</th>
          <th scope="col">Nombre del Cliente</th>
          <th scope="col">CIF / NIF</th>
          <th scope="col">Dirección de Facturación</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-danger" *ngFor = "let cliente of clientes | paginate: {itemsPerPage: 2, currentPage: pages}">
          <td class="table-danger">{{cliente.idCliente}}</td>
          <td class="table-danger" >{{cliente.nombreCliente}} </td>
          <td class="table-danger" >{{cliente.cifnif}} </td>
          <td class="table-danger">{{cliente.direccionFacturacion}}</td>
          
          <button (click)="setCliente(cliente)"class="fa fa-edit" data-toggle="modal" data-target="#myModal"></button>
          <button (click)="setCliente(cliente)"class="fa fa-truck" data-toggle="modal" data-target="#modalEnvio"></button>
          
        </tr>
        
      </tbody>
    </table>
   </li>
</div>
<pagination-controls [autoHide]=false (pageChange)="pages = $event" >
        </pagination-controls>
 <div class="form-group"  id="inputInsertar" style="display: none">
    Nombre del Cliente: <input type="text" placeholder="Nombre Cliente" id="iNombreCliente" class="form-control">
    Cif / Nif del Cliente <input type="text" placeholder="CIF / NIF" id="iCif" class="form-control">  
    Dirección de Facturación <input type="text" placeholder="Dirección de Facturación" id="iDir" class="form-control">
    <button type="submit" style="background: orangered" class="form-group" (click)="insertarCliente()">Enviar</button>
    
</div>
<div class="row">
  <button class="fa fa-step-backward" (click)="mostrarCliente()" data-toggle="modal" data-target="#inputpaginas" style="background: red"></button>
  <button class="fa fa-step-forward" (click)="mostrarCliente()" data-toggle="modal" data-target="#inputpaginas" style="background: red"></button>
</div>




<!-- Modal  -->

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title">Datos del cliente</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        
      </div>
      <div class="modal-body">
          Id del Cliente: <input type="text" placeholder="Id del cliente" id="idA" class="form-control" value="{{clienteActual.idCliente}}" disabled> <br>
          Nombre del Cliente: <input type="text" placeholder="Nombre Cliente" id="iNombreClienteA" class="form-control" value="{{clienteActual.nombreCliente}}"> <br>
          Nif del Cliente <input type="text" placeholder="CIF / NIF" id="iCifA" class="form-control" value="{{clienteActual.cifnif}}"> <br>
          Dirección de Facturación <input type="text" placeholder="Dirección de Facturación" id="iDirA" class="form-control" value="{{clienteActual.direccionFacturacion}}">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="actualizarCliente()">Actualizar</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalEnvio" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title">Datos del Destinatario
          </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        
      </div>
      <div class="modal-body">
          Id del Cliente: <input type="text" placeholder="Id del cliente" id="idCDES" class="form-control" value="{{clienteActual.idCliente}}" disabled> <br>
          Nombre del Destinatario: <input type="text" placeholder="Nombre Destinatario" id="iNombreDestinatario" class="form-control" value=""> <br>
          Nif del Destinatario <input type="text" placeholder="CIF / NIF" id="sd" class="form-control" value=""> <br>
          Dirección de Envío <input type="text" placeholder="Dirección de Envío" id="iDirc" class="form-control" value="">
          Código Póstal <input type="text" placeholder="Código Postal" id="iCPA" class="form-control" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="insertarDestinatario()">Insertar</button>
      </div>
    </div>
  </div>
</div>

</div>