Angular не обновляет интерфейс с новым значением (только если явно принудительно)

Question

Недавно я узнал о возможности доступа к датчикам устройства через браузер с помощью js (в настоящее время действительно работает только с браузерами Chromium на мобильных устройствах и требует подключения https сверху).
Моя цель состояла в том, чтобы отобразить показания датчика (например, акселерометра), предоставляемого его onreading EventHandler, в простом угловом приложении.

Минимальный пример:

app.component.ts:

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

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit{
 sensor;
 reading = 0;

 ngOnInit() {
  const sensorFunction = window['Accelerometer'];
  this.sensor = new sensorFunction({ frequency: 1 });
  this.sensor.start();

  this.sensor.onreading = (ev) => {
   this.reading = ev.currentTarget.x;
   console.log(this.reading);
  };
 }
}

app.component.html

<p> Reading is {{ reading }}</p>

Я также создал stackblitz с тем же кодом.

---

Поскольку пользовательский интерфейс не обновлялся и не отображал текущее значение reading, я нашел 2 решения для принудительного обновления:

1. Добавить пусто setInterval
2. Используйте ChangeDetectorRef и звоните detectChanges() каждый раз, когда с датчика поступает новое показание

Они оба решают проблему и обновляют интерфейс, чтобы показать новое значение, но мне любопытно, почему angular не обнаружил изменение автоматически.
Что мне здесь не хватает?
Это как-то связано с использованием EventHandler для установки значения?
(я также пытался передать показания датчика в качестве входного значения дочернему компоненту или использовать другой хук жизненного цикла, но получил тот же результат )