ix-tree triggers multiple angular change detection constantly per second

[ttwiesal]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

ix-tree used in an angular application triggers the change detection multiple times per second constantly in an application that uses zone.js

Steps to reproduce:

1. Install Angular Devtools for Chrome
2. start stackblitz example of ix-tree: https://ix.siemens.io/docs/components/tree/code#basic
3. open DevTools of chrome and go to Angular tab
4. Start recording

Once the tree is loaded, angular runs constant change detection cycles.

The problem is the following code in lazy.ts:
`// Create internal render loop.
const render = () => {
const scrollTop = this._getScrollPosition();
const lastRepaint = this._lastRepaint;

  this._renderAnimationFrame = window.requestAnimationFrame(render);

  if (scrollTop === lastRepaint) {
    return;
  }

  const diff = lastRepaint ? scrollTop - lastRepaint : 0;
  if (!lastRepaint || diff < 0 || diff > this._averageHeight) {
    let rendered = this._renderChunk();

    this._lastRepaint = scrollTop;

    if (rendered !== false && typeof config.afterRender === 'function') {
      config.afterRender();
    }
  }
};

`

Zonejs patches requestAnimationFrame and runs change detection.

What type of frontend framework are you seeing the problem on?

Angular (NgModule)

On which version of the frontend framework are you experiencing the issue?

@angular/core@18.0.0

Which version of iX do you use?

v3.0.0

Code to produce this issue.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeModel } from '@siemens/ix';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-example',
  template: ` <div class="example">
    <ix-tree root="root" [model]="model"></ix-tree>
  </div>`,
  styles: [
    `
      .example {
        display: block;
        position: relative;
        height: 32rem;
        width: 100%;
      }
    `,
  ],
})
export default class Tree {
  model: TreeModel<{
    name: string;
  }> = {
    root: {
      id: 'root',
      data: {
        name: '',
      },
      hasChildren: true,
      children: ['sample'],
    },
    sample: {
      id: 'sample',
      data: {
        name: 'Sample',
      },
      hasChildren: true,
      children: ['sample-child-1', 'sample-child-2'],
    },
    'sample-child-1': {
      id: 'sample-child-1',
      data: {
        name: 'Sample Child 1',
      },
      hasChildren: false,
      children: [],
    },
    'sample-child-2': {
      id: 'sample-child-2',
      data: {
        name: 'Sample Child 2',
      },
      hasChildren: false,
      children: [],
    },
  };
}