How to give a `TemplateRef` as an `@Input` arg to a Story?

Question

I'm trying to make a Story that uses a component that takes a TemplateRef as an @Input. But I can't figure out how.

TestComponent

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class TestComponent {
  @Input() public set value(value: TemplateRef<void>) {
    // ...
  }
}

Story

export default {
  title: 'Components/Test',
  component: TestComponent,
} as Meta;

const Template: Story<TestComponent> = (args) => ({
  props: args,
});

export const TemplateRefStory = Template.bind({});
TemplateRefStory.args = {
  value: ???, // <-- what do I put here?
};

I've tried a variety of things, they're similar to the below. Which doesn't really make sense.

export const TemplateRef: Story<TestComponent> = (args) => ({
  template: `<ng-template #hello>Hello</ng-template>`,
  props: args,
});

TemplateRef.args = {
  value: '#hello',
};

Susian

I'm not familiar with storybook but it might be easier to use a @ContentChild – Carboniferous

Did anyone find a solution here? I'm having the same issue. – Vaudeville

@Vaudeville can you check my answer? – Lion

Answer 1

I followed a approach like this and it worked

   export default {
    title: 'StepperComponent',
    component: StepperComponent,
    decorators: [
      moduleMetadata({
        imports: [
          CommonModule,
          BrowserAnimationsModule,
          MaterialModule
        ],
      })
    ],
  } as Meta<StepperComponent>;
  
  const actionsData = {
    checked: action('checked change: '),
  
  };



 export const Template: Story = (args) => ({
    props: {
      ...args
    },
    template: `

      <app-stepper 
        [steps]="[{stepName: 'Connectivity Type', stepTemplate: step1Template}, {stepName: 'Database Authentication', stepTemplate: step2Template}]">
      </app-stepper>

      <ng-template #step1Template>
        <div>Step 1</div>
      </ng-template>
      <ng-template #step2Template>
        <div>Step 2</div>
      </ng-template>
    `
  });

Here I have defined the the elements I need, within the story template. I assume you can also include components within the ng-template tags too.

  <ng-template #step2Template>
    <cmp-test></cmp-test>
  </ng-template>

Don't forget to add BrowserAnimationsModule

Lion

This is a good approach that works. The downside is that the storybook controls won't work since it is hardcoded in the template. For now what I did was disabling the controls by adding the following to the Meta object ` argTypes: { steps: { table: { disable: true } } }` – Covering