Storybook: Access to an angular service in an action

Created on 6 Nov 2019 · 7Comments · Source: storybookjs/storybook

Hello

I'm not finding anywhere (in the documentation, google or github) an example of someone calling a service (angular service) in an action of the story.
On click, I want to call a service.

Does this functionality exist ? if yes, how can I access to the service ?

I'm trying to dynamicaly add toasters from a button in my story

export const toasters = () => ({
  template: '<tpz-toasters</tpz-toasters>' +
    '<button (click)="onClick()">Add Toaster</button>',
  props: {
    onClick: () => {
      toasterService.addToaster();
    },
  }
});

Here tpz-toasters is my global toaster container. It's a component plug on an observable of a service (TpzToasterService).
When a new toaster is added to the service, the toaster container will be able to display it.

How can I access to toasterService ? Is it a new feature to implement ?

Thanks for your help

angular help wanted inactive question / support

Source

remybd

👍6

Most helpful comment

You can create a wrapper demo component

export const primaryButton = () => ({
  component: PrimaryButtonDemo
})

@Component({
  template: `<button (click)="doStuff()">Do stuff</button>`
})
class PrimaryButtonDemo {
  constructor(private myService: MyService) {
  }

  doStuff() {
    this.myService.callMethod();
  }
}

I structure my stories like that

| /stories
| --- primary-button.stories.ts
| --- primary-button-demo.component.ts
| /primary-button.component.ts

I don't think there's another way expect creating an instance of your service manually (without using angulars DI)

So, of course this is also possible:

const service = new MyService();

export const primaryButton = () => ({
  template: `<button (click)="doStuff()">Do stuff</button>`,
  props: {
    doStuff: () => {
      service.callMethod()
    }
  }
})

kroeder on 5 Feb 2020

👍3

All 7 comments

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 28 Nov 2019

stale[bot] on 19 Dec 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 19 Jan 2020

I'm having the same issue.

Has anyone come up with a solution?

Terrafire123 on 5 Feb 2020

You can create a wrapper demo component

export const primaryButton = () => ({
  component: PrimaryButtonDemo
})

@Component({
  template: `<button (click)="doStuff()">Do stuff</button>`
})
class PrimaryButtonDemo {
  constructor(private myService: MyService) {
  }

  doStuff() {
    this.myService.callMethod();
  }
}

I structure my stories like that

| /stories
| --- primary-button.stories.ts
| --- primary-button-demo.component.ts
| /primary-button.component.ts

I don't think there's another way expect creating an instance of your service manually (without using angulars DI)

So, of course this is also possible:

const service = new MyService();

export const primaryButton = () => ({
  template: `<button (click)="doStuff()">Do stuff</button>`,
  props: {
    doStuff: () => {
      service.callMethod()
    }
  }
})

kroeder on 5 Feb 2020

👍3

I did smething like that to. With another folder that I called demo-components. But it's the same system.
For documentation, it's better in this case to write it by hand instead of let it storybook generate it for you

remybd on 5 Feb 2020

@kroeder Great workaround!! I still hope storybook team can take this more seriously. It will be a very useful feature.