Storybook documentation for ng-content

I'am struggling to display a complete Storybook documentation for a component.
This component can be used with some contents to display (a title and some body content).
I want Storybook to display the possible contents (ng-content) that can be passed to the component and add some documentation for each of them

MyComponent.html

<ng-content select="[title]"></ng-content>

<div class="body">
<ng-content></ng-content>
</div>


MyComponent.ts

/** A custom title. */
@ContentChild('title') readonly title: ElementRef;

/** A custom body via `<ng-content>`. */
@ContentChild(ElementRef) readonly content: ElementRef;


MyComponent.stories

<my-component>
<span title>Custom title</span>

<p>Some custom body</p>
</my-component>


I know that the @ContentChild I wrote are not correct to reference the two <ng-content>.
I need some help to write the right code in MyComponent.ts in order to document in Storybook what the user is able to do with this component (What "API" of ng-content he could use).
Is it at least possible to achieve what I need or should I proceed diferently ?

Continue reading...