Компонент обновления Angular при изменении состояния

Я работаю над своим первым приложением angular и испытываю некоторые проблемы с обновлением/повторным рендерингом моего компонента.

В моем компоненте есть функция обновления, которая извлекает ресурс из моей серверной части и сохраняет результат в переменной с именем taskList. Я хотел бы, чтобы компонент обновлялся/перерисовывался каждый раз, когда вызывается эта функция.

update = async () => {
    const url = 'http://localhost:3000/tasks/' + this.date.valueOf();
    const data = await fetch(url);
    const result = await data.json();
    this.taskList = result.tasks
};

Я отображаю значения списка следующим образом:

<div 
    <div 
        *ngFor="let tasks of taskList" 
        class={{tasks.color}}  
        {{tasks.text}}
    </div>
</div>

У меня есть еще один случай, когда я добавляю элементы в список с последующим вызовом функции обновления. Он успешно обновляет переменную taskList, но не выполняет повторную визуализацию компонента.

Я пробовал различные реализации ChangeDetectorRef, которые я нашел в Интернете, но безуспешно.