Angular 5 - how to limit change detection only to component scope?

Question

How to configure Angular component not to trigger change detection for the whole application but only for the component itself and his children?

Working example: https://stackblitz.com/edit/angular-irc-starter-4txpbu?file=app%2Ftimer%2Ftimer.component.ts

There is a counter that increases value by one every second. It's TimerComponent and it's working as intended - value is increased and updated every second.

@Component({
  selector: 'app-timer',
  template: `{{value}}`
})
export class TimerComponent implements OnInit {
  value: number = 0;
  ngOnInit() {
    setInterval(() => this.value++, 1000);
  }
}

However, look at the parent component AppComponent.

<h3>Internal timer:</h3>
<p>Should not perform change detection for the whole app</p>
<app-timer></app-timer>

<h3>External binding</h3>
<p>Should not be updated after timer changes</p>
<p>{{someBindingProperty}}</p>

someBindingProperty is a getter:

get someBindingProperty() {
  this.bindingTimer++;
  return this.bindingTimer;
}

The problem: when TimerComponent increases value, change detection is triggered for the whole application. Is it possible to trigger change detection only within the component and children?

Note: if I add to TimerComponent:

changeDetection: ChangeDetectionStrategy.OnPush

Then changes are not detected within this component but change detection is still triggered for the whole application. So this is not a solution.

Answer 1

Another option to temporary disable change detection ChangeDetectorRef

enabled = true;  
constructor(private ref: ChangeDetectorRef)

toggleChangeDetection() {
  if (this.enabled) 
  {
    this.enabled = false;
    this.ref.detach();
  }
  else {
    this.enabled = true;
    this.ref.reattach();
}