Angular-split and ng-content

Question

My goal is to make a more customizable angular-split control. The new component should be able to be used similarly to the original:

main.ts

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CustomSplitter, AngularSplitModule],
  providers: [SplitComponent], // <-- injects unwanted extra component
  template: `
    <custom-splitter direction="vertical" [saveSettings]="true">
      <as-split-area pane1 [size]="90">
        pane1
      </as-split-area>
      <as-split-area pane2 [size]="10">
        pane2
      </as-split-area>
    </custom-splitter>
  `,
})
export class App {}

splitter.ts

@Component({
  selector: 'custom-splitter',
  templateUrl: '<as-split>
      <ng-content select="[pane1]"></ng-content>
      <ng-content select="[pane2]"></ng-content>
   </as-split>',
  imports: [AngularSplitModule, CommonModule],
  standalone: true,
})
export class CustomSplitter extends SplitComponent {
  @Input() saveSettings?: boolean;
}

However, this doesn't work. In the above setup, the compiler complains that it needs SplitComponent as a provider (red flag). When I do that, it injects its own instance which of course isn't my CustomSplitter subclass. So my content ends up displayed outside my splitter. I understand that my content gets created beforehand and then moved to the ng-content, thanks to this video about content projection, but I'm not sure that ngTemplateOutlet is what I want, since I don't want copies. How do I properly pass my panes down through my custom component to as-split such that it recognizes them as as-split-area?

https://stackblitz.com/edit/stackblitz-starters-i8rath?file=src%2Fmain.ts