Problema na paginação

Na aula de paginação, tive problema com o botão "carregar mais". Fiz conforme a aula, mas quando chega no final da lista, não é mostrado o parágrafo "Não há mais pensamentos para exibir" e o botão continua lá. Foram essas as implementações:

bota-carregar-mais.component.html

<div class="center" *ngIf="haMaisPensamentos; else semMaisPensamentos">
  <button class="botao carregar-mais"> Carregar Mais</button>
</div>
<ng-template #semMaisPensamentos>
  <p class="mensagem-center ff-inter">Não há mais pensamentos para exibir.</p>
</ng-template>

listar-pensamento.component.html

<section class="container">
  <header class="header d-flex">
    <h2 class="ff-inter"> Meu Mural</h2>
    <button routerLink="/criarPensamento" class="botao">Adicionar Pensamento</button>
  </header>
  <div class="mural" *ngIf="listaPensamentos.length > 0, else semPensamentos">
    <div *ngFor="let pensamento of listaPensamentos">
      <app-pensamento [pensamento]="pensamento"></app-pensamento>
    </div>
  </div>
</section>
<app-botao-carregar-mais [haMaisPensamentos]="haMaisPensamentos" (click)="carregarMaisPensamentos()">

</app-botao-carregar-mais>
<ng-template #semPensamentos>
  <div class="ff-inter sem-pensamentos">
    <p>Ainda não há pensamentos cadastrados!</p>
  </div>
</ng-template>

listar-pensamento.component.ts

carregarMaisPensamentos(){
    this.service.listar(++this.paginaAtual).subscribe(listaPensamentos => {
      this.listaPensamentos.push(...listaPensamentos)
      if (!this.listaPensamentos.length){
        this.haMaisPensamentos = false;
      }
    })
  }