ng-content not rendering where I want

Question

I'm trying to have a custom component to render content passed from the parent component in the ng-content node placed where I want it.

Here's the custom component:

<kendo-dropdownbutton [size]="size" (itemClick)="itemClick($event)" [data]="data" [icon]="icon">
  {{text}}
  <ng-content></ng-content>
</kendo-dropdownbutton>

Its typescript code:

export class CustomDropDownButtonComponent {

  @Input() data: any[];
  @Input() icon: string;
  @Input() text: string;
  @Input() contextData: any;
  @Input() size: string = "medium";
  
  @ContentChild(ButtonItemTemplateDirective) public buttonItemTemplate: ButtonItemTemplateDirective;

  constructor() {
    
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.buttonItemTemplate);
  }

  itemClick(e: any) {
    e.contextData = this.contextData;
  }

}

And here's the parent component using it

<custom-dropdown-button size="small" icon="more-vertical" [contextData]="data" [data]="projectVersionDropDownItems()">
          <ng-template kendoDropDownButtonItemTemplate let-dataItem>

            <span>{{dataItem.text}} TEST!</span>

          </ng-template>
          
</custom-dropdown-button>

When including a kendoDropDownButtonItemTemplate directive, I'm expecting buttons to be rendered by certain rules decided by the parent component. When specifying no such template, I'm expecting it to just use the data array to render the buttons.

It seems to be working as I do get an output in ngAfterViewInit when including the template, the problem is that the buttons are rendered plainly using the array completely ignoring the template directive.

I'm using this documentation as guideline.

Any ideas ?