matBadge calls funktion infinte

Question

I have a matBadge who is in a *ngFor and it gets filled with data that gets calculated with a method which goes into my backend. It needs the parameter chat.id for this method, but it gets inifinte when called:

HTML:

<div *ngFor="let chat of chats" class="deleteFieldButtons">
    <button mat-raised-button [matBadge]="countMessages(chat.id!) | async" color="primary" (click)="chatName= chat.chatName; openChat(chat.id!)" class="deleteFieldButton">
      <p class="deleteFieldText1">{{ chat.chatName }}</p>
    </button>
  </div>

TS:

countMessages(chatID: number): Observable<number> {
    return this.messageService.notReadMessagesChat(chatID, this.userId).pipe(
      take(1),
    );
  }

It should give out 1 1 1 3 and that works, but it makes it infinite and that makes my application crash.