Custom Parent Component and service

[AlDrag]

I am trying to sandbox a large component. It requires a parent component to input it data as well as angular service. It needs to pass the service as an input to the component template. How can this be done?

[jschwarty]

my.component.sandbox.ts

. . .

// You would need to handle creating service instance:
const myServiceInstance = new MyService();

. . .

export default sandboxOf(MyComponent)
  .add('example', {
    template: `<my-component [service]="theService"></my-component>`,
    context: {
      theService: myServiceInstance
    }
  });

Right now there is no other way to do this in Playground. It's not really something that has come up since most service architecture is handled via the dependency injection pattern in Angular applications.

[AlDrag]

Sorry if I am overlooking this, but that solution doesn't work with injectables right? As I need an Angular Injectable service.

Edit: No problem. Thanks for the help. Maybe it would be better to sandbox with a parent component that contains my child component.

[jschwarty]

Do you have an example you could post in here that I can look at?

Right now I can't see a way to be able to get a hold of an injected service (instantiated by Angular) and then hand it to the sandboxed component via an Input. If that sandboxed component got the service from constructor injection then you could provide that service or a mock of it at either the sandboxOf or the add method level. Not sure that there is a way right now to get a service onto that context of the host component to then be able to pass it to the Input without newing that up manually. I mean, there might be a way...but it'd be complicated.

[AlDrag]

I solved it. Just decided to make a mock service as you suggested.