mdbTable looses styles

When Adding mdbTable directive, anchor links looses styles, if I use classes it doesn't looses styles in columns, but when I navigate away by clicking on an link in the table and come back to the same page, styles are losts.

Here is my code:

<mdb-tabset class="px-0" [buttonClass]="'nav md-pills pills-blue-grey darken-1'" [contentClass]="'card'">
  <!--Panel 1-->
  <mdb-tab heading="Llegadas">
    <div class="row">
      <div class="col-12 table-responsive-xl">
        <table mdbTable responsive="true" [striped]="true" class="d-block d-md-table">
          <thead>
          <th class="font-weight-bolder">Huesped</th>
          <th class="font-weight-bolder">Confirmacion</th>
          <th class="font-weight-bolder">Salida</th>
          <th class="font-weight-bolder">Fecha Reservacion</th>
          <th class="font-weight-bolder">Habitaciones</th>
          <th class="font-weight-bolder">Estatus</th>
          <th></th>
          </thead>
          <tbody>
          <tr *ngFor="let reservation of this.reservationList">
            <td>{{ reservation.contact.firstName + ' ' + reservation.contact.lastName }}</td>
            <td>{{ reservation.confirmation }}</td>
            <td>{{ reservation.checkout | date: 'dd/M/yyyy' }}</td>
            <td>{{ reservation.createdAt | date: 'dd/M/yyyy' }}</td>
            <td>{{ reservation.reservationItems.length }}</td>
            <td><mdb-badge [color]="selectColor(reservation.status)">{{ reservation.status }}</mdb-badge></td>
            <td>
              <a [routerLink]="['/admin/reservacion/', reservation._id]">
                ver
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </mdb-tab>

and here is a screenshot, as you can see weight on content is very low

Here is my code using classes instead of the mdbTable directive:

 <mdb-tabset class="px-0" [buttonClass]="'nav md-pills pills-blue-grey darken-1'" [contentClass]="'card'">
  <!--Panel 1-->
  <mdb-tab heading="Llegadas">
    <div class="row">
      <div class="col-12 table-responsive-xl">
        <table class="table table-striped table-responsive-md btn-table">
          <thead>
          <th class="font-weight-bolder">Huesped</th>
          <th class="font-weight-bolder">Confirmacion</th>
          <th class="font-weight-bolder">Salida</th>
          <th class="font-weight-bolder">Fecha Reservacion</th>
          <th class="font-weight-bolder">Habitaciones</th>
          <th class="font-weight-bolder">Estatus</th>
          <th></th>
          </thead>
          <tbody>
          <tr *ngFor="let reservation of this.reservationList">
            <td>{{ reservation.contact.firstName + ' ' + reservation.contact.lastName }}</td>
            <td>{{ reservation.confirmation }}</td>
            <td>{{ reservation.checkout | date: 'dd/M/yyyy' }}</td>
            <td>{{ reservation.createdAt | date: 'dd/M/yyyy' }}</td>
            <td>{{ reservation.reservationItems.length }}</td>
            <td><mdb-badge [color]="selectColor(reservation.status)">{{ reservation.status }}</mdb-badge></td>
            <td>
              <a [routerLink]="['/admin/reservacion/', reservation._id]">
                ver
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </mdb-tab>

And here is an image, as you can see text is bolder and link is blue:

Another problem I have is when I use classes as in the second code, when I navigate to another page and comeback, the table looses it's styles, meaning the link won't be blue and text weight gets very low as if I was using the mdbTable directive.

am I using the directive and or classes incorreclty ? how can I navigate to another page ( within my angular app) and comeback to this page and keep the styles in the table?

Regards, Jose Renteria