Angular - добавить ngClass при нажатии 5-й кнопки

Попытка добавить ngClass в div после 5 нажатий кнопок.

Вот кнопка, расположенная в файле app.component.html:

<button class = "btn btn-primary" (click) = "onToggleDetails()">Display Details</button>

<p *ngIf = "showSecret">Secret Password = tuna</p>

<div *ngFor = "let logItem of log" 
  [ngStyle] = "{backgroundColor: logItem >= 5 ? 'blue' : 'transparent'}"
  [ngClass] = "{'white-text': logItem >= 5}"
>{{ logItem }}</div>

Вот файл app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'], *** EDIT ***
  styles: [`
  h3 {
    color: dodgerblue;
  }
  `]
})
export class AppComponent {
  username1 = '';
  showSecret = false;
  log = [];
  onToggleDetails(){
  this.showSecret = !this.showSecret;
  this.log.push(this.log.length + 1);
  }
}

Вот app.component.css

.white-text{
  color: white;
}

В настоящее время фон logItem остается синим после нажатия 5-й кнопки. Я могу осмотреть консоль и увидеть, что класс .white-text добавлен, но текст остается черным.

Вот как это выглядит:

Когда я осматриваю элемент, вы видите, что класс добавлен:

Я новичок в Angular, прохожу курс udemy и застрял здесь. Я не могу перейти к следующей части, пока не исправлю это.