Show table only if angular elements 2+

I have the following table:

    <table class="table table-bordered">
  <thead>
    <tr>
      <td>Nome</td>
      <td>Email</td>
      <td>Data</td>
      <td>Status</td>
      <td width=275 align="center">Ação</td>
    </tr>
  </thead>
  <tbody>
     <tr *ngFor="let ticket of tickets">
        <td>{{ticket.nome}}</td>
        <td>{{ticket.email}}</td>
        <td>{{ticket.data | date:'dd/mM/yyyy'}}</td>
        <td *ngIf="ticket.status == 1">Aberto</td>
        <td *ngIf="ticket.status == 2">Em Andamento</td>
        <td *ngIf="ticket.status == 3">Fechado</td>
        <td width=275>
            <a class="btn btn-info" routerLink="/show/{{ticket.id}}">Detalhes</a>
            <a class="btn btn-success" routerLink="/edit/{{ticket.id}}">Editar</a>
            <a class="btn btn-danger" (click)="deleteTickets(ticket.id)">Deletar</a>
        </td>
     </tr>

  </tbody>

</table>

I tried something like:

 <div class="col-xs-12" *ngIf="tickets.length === 0">
        <p>
          Não há tickets! Comece por <a [routerLink]="['/add']">aqui</a> !
        </p>

      </div>

    <div class="col-xs-12 table-responsive" *ngIf="tickets.length > 0">

In this way it hides when there are no tickets registered, but does not show the message of <p> and when I click on "Delete Ticket", I have to refresh the page to update. How can I fix this?