Accessing ng-content from component code without a wrapper ViewChild

Let's say I have a component called RecursiveComponent (with a selector named recursive). It has a number "identifier" as input, as well as accepting more RecursiveComponents in its body. So the HTML code that uses this component may look like this:

<recursive identifier="1">
  <recursive identifier="2">
    <recursive identifier="3"></recursive>
  </recursive>
  <recursive identifier="4"></recursive>
</recursive>

For simplicity, the component only outputs "identifier has x children" and then the inserted body which is done through <ng-content>. This works, but to figure out how many children components there are, I have to wrap the ng-content with a ViewChild and look at the nativeElement's childNodes, which I feel is a little overkill. This is what the component code looks like:

@Component({
  selector: 'recursive',
  template: `
    {{identifier}} has {{noOfChildren}} children 
    <div #contentRef>
      <ng-content select="recursive"></ng-content>
    </div>`
})
export class RecursiveComponent implements OnChanges {
  @ViewChild('contentRef', { read: ElementRef }) contentRef: ElementRef;

  @Input() identifier: number;

  noOfChildren: number;

  ngOnChanges() {
    if (this.contentRef) {
      this.noOfChildren = this.contentRef.nativeElement.childNodes.length;
    }
  }
}

Is there a better and more Angular-like way to access the ng-content from within the component code? This feels like a hack.

Working demo: https://stackblitz.com/edit/angular-wz8zu6