How to add customisable ng-content in a Storybook story in Angular

I've got a component for a badge where the text displayed in the badge is done with ng-content. I trying to create a Storybook story for this where I want the text in the badge to be customisable when viewing the story. I've tried following the example mentioned here, but I might be doing something wrong. I moved from Storybook v6 to v8 and can't figure it out.

import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { BadgeDirective } from "./badge.directive";
import { ComponentsModule } from "../components.module";
import { ComponentServicesModule } from "../../services/component-services.module";

const meta: Meta<BadgeDirective> = {
title: 'Components/Display content/Badge',
decorators: [
moduleMetadata( {
imports: [ ComponentsModule, ComponentServicesModule.forRoot() ]
} )
]
};
export default meta;

type Story = StoryObj<BadgeDirective>;

export const Primary: Story = {
name: 'Badge',
args: {
colorStyle: 'primary',
content: 'My badge value'
},
render: ( args ) => ( {
props: args,
template: `<badge [badgeStyle]="colorStyle">${args.content}</badge>`
} )
}


It's throwing an error saying content is not a known property of args. This is because content is not an actual Input() on the component like colorStyle is.

How can I make what is displayed in the badge in the template customisable for the user, so that when viewing storybook, they can adjust the text?

Continue reading...