Angular Storybook - How to use a service with dependencies in a story without creating a separate component?

Question

I'm working on a Storybook project where I have a component (ToastersComponent) used only for Storybook purposes, and I want to use an Angular service (ToasterService) within it. The service has dependencies injected through its constructor (e.g., Overlay, BreakpointObserver).

The challenge is that the component is used exclusively for Storybook, and I prefer to keep it within the story file without creating a separate component file.

Here's a simplified version of the relevant code:

// ... (imports)

export const Toaster: Story<ToastersComponent> => {
  ...,
  render(args) => ({
    props: {
      ...args,
      generateToaster: ()=> {
        alert("Generate Toaster !")
        // need to call toasterService.show()
      }
    },
    template: `
      <div>
        <button (click)="generateToaster()"> Show Toaster</button>
      </div>
    `,
});

How can I correctly inject the ToasterService within the Storybook story, considering it's only used for Storybook and I'd like to avoid creating a separate component file?

Answer 1

The easiest and straightforward way is to create a dedicated component that can inject our service ( as sample as this :)

// ... (imports)



@Component({ // an inner-component for more readable story
  selector: 'toasters-component',
  template: ` <button (click)="showToaster()"> Show Toaster</c-button> `,
})
export class ToastersTestComponent {
  @Input() message: string = ''
  @Input() status: string = 'success'
  ... 

  constructor(private toasterService: MyToasterService) {}

  showToaster() {
    this.toasterService.show(this.message, this.status ... })
  }
}

...

export const Toaster: Story<ToastersTestComponent> => {
  ...,
  render(args) => ({
    props: {
      ...args,
    },
    template: `
      <div>
        <toasters-component [message]="message" .. > </toasters-component>
      </div>
    `,
});