Change Detector Tree

Question

We have an application where we need to dettach from the ChangeDetector and everything works so far.

This is our current component structure:

AComponent (Normal Component, Attached)
   BComponent (Detaches from ChangeDetector)
      CComponent (Detached, because the parent is detached)
         DComponent (Should Reattach)
            MatInput or whatever
      CComponent (Detached)
      ...

We need to reattach the DComponent tho, because it should contain some material controls that require the change detection. I've tried manually calling .reattach on a ChangeDetectorRef, which should not even be necessary according to the doc - but the component won't attach anyways.

I've tried around and added a simple button / counter that should be detected - but it won't update the counter label.

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

@Component({
  selector: 'app-component-d',
  template: ` <button (click)="add()">Add 1</button>

    <mat-form-field appearance="outline">
      <mat-label>Some Label {{ counter }}</mat-label>

      <mat-select>
        <mat-option *ngFor="let item of [1, 2, 3, 4]" [value]="item">
          {{ item }}
        </mat-option>
      </mat-select>
    </mat-form-field>`
})
export default class DComponent implements OnInit {
  counter = 1;

  constructor(private changeDetector: ChangeDetectorRef) {}

  ngOnInit() {
    this.changeDetector.reattach();
  }

  add() {
    this.counter += 1;
  }
}

I assume that I am outside of the change detection tree because of the parent element (BComponent) that detached itself from the change detector - Is there a way to reattach DComponent, without attaching BComponent?

Thank you!