@ngrx/component: Use "global" rendering strategy in zoneless mode

[markostanimirovic]

@ngrx/component uses changeDetectorRef.detectChanges in zoneless mode. This method will synchronously run change detection which can cause performance issues.

For example, the following component will be rerendered 3 times when "Emit new value" button is clicked:

@Component({
  selector: 'ngrx-number',
  template: `
    <p>{{ num$ | ngrxPush }}</p>
    <p>{{ num$ | ngrxPush }}</p>
    <p>{{ num$ | ngrxPush }}</p>

    <button (click)="emitNewValue()">Emit new value</button>
  `,
})
export class NumberComponent {
  readonly num$ = new BehaviorSubject(0);

  emitNewValue(): void {
    this.num$.next(Math.random());
  }
}

because the changeDetectorRef.detectChanges will be called 3 times under the hood.

As a solution, we can use the θmarkDirty function to trigger the change detection in zoneless mode. Also, the rendering strategy in zoneless mode will be "global" with θmarkDirty. This will make the rendering strategy consistent in both zoneless and zonefull mode.