Angularにて、addEventListenerを使ったプログラムに関する質問

Question

前提・実現したいこと

Angularを使い、addEventListenerの値をビューに更新するプログラムを作っています。

発生している問題・エラーメッセージ

以下ソースコードにて、x,y,zの値が更新されない(初期値で設定した0のまま)です。
試行錯誤の上、試したことに記載した内容で更新されることを確認したのですが、
以下ソースにて更新されない理由がわからなく、ご存知の方、ご教授いただきたいです。

該当のソースコード

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

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

export class AppComponent implements OnInit{
  x:any = 0;
  y:any = 0;
  z:any = 0;
  

  ngOnInit(){
    this.func2();
  }
  
  func1():void{
    setInterval(() =>{
      this.func2();
    }, 1000);
  }
  
  func2():void{
    window.addEventListener('devicemotion', (event) => {
      this.x = event.accelerationIncludingGravity.x;
      this.y = event.accelerationIncludingGravity.y;
      this.z = event.accelerationIncludingGravity.z;
    });
  }
}

試したこと

ngOnInit()関数を以下のようにすると、更新されるようになりました。

ngOnInit(){
   this.func1();
}

Answer 1

window.addEventListenerでリスナーを追加するとAngularのDOM監視外になります。

強制的に通知させるにはthis.changeDetectorRef.detectChanges();処理を追加する