How can I inject an Angular service into a Storybook story?

Below is an approach you can follow:

1. Include the Service in Module Metadata:
   In Storybook for Angular, you can use the moduleMetadata decorator to add any providers (or imports) your story needs. If your service (e.g. NotificationService) isn’t globally available (via providedIn: 'root') or if you want to use specific configuration, you can include it in the providers array.

2. Set Up the Story:
   Configure your story with moduleMetadata so that the injector has your real NotificationService. For example:

   TYPESCRIPTCopied
   import { moduleMetadata } from '@storybook/angular';
   import { NotificationService } from './path-to-notification.service';
   import { MyButtonComponent } from './my-button.component';
   
   export default {
     title: 'My Button',
     component: MyButtonComponent,
     decorators: [
       moduleMetadata({
         declarations: [MyButtonComponent],
         providers: [NotificationService],
         // Or if your NotificationService is part of a module, import that module:
         // imports: [YourCustomModule],
       }),
     ],
   };
   
   export const WithNotification = () => ({
     props: {
       uType: 'secondary',
       withDelay: (injector: Injector) => {
         const notificationService = injector.get(NotificationService);
         notificationService.show('Hello');
         alert('hello');
       },
     },
     template: `
       <button uAction [uType]="uType" (click)="withDelay(injector)">
         Show notification
       </button>
     `,
   });

3. How It Works:

   • The Storybook story is decorated with moduleMetadata providing the NotificationService.
   • In your component template, you call withDelay(injector) passing the Angular injector injected via Story context.
   • Inside the withDelay method, using injector.get(NotificationService) retrieves the actual service instance and lets you call its methods.

4. Troubleshooting:
   If you encounter issues with injector not being available in the template, double-check that your Storybook setup is configured to supply Angular’s dependency injection into your story. Sometimes it may be necessary to define a component that expects an injector property or include the service using the component’s own constructor injection.

Using this approach will allow you to inject and use a real service instance in your Storybook Angular stories.