Changing the value of an observable with a knob

Question

I'm currently working with Storybook and Angular. I can't seem to change the value of an Observable in one of my component. Nothing is showing up on the storybook.

I've tried to do of(true) to change the value, but it doesn't seem to work even without it. Tried inspecting the element but there is nothing so I assume that it didn't do anything.

My story:

stories.add('Loader', () => {
  return {
    template: `
      <rpg-loader>
      </rpg-loader>
    `,
    props: {
      isLoading$: boolean('isLoading$', of(true))
    }
  };
});

My Component:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'rpg-loader',
  templateUrl: './loader.html',
  styleUrls: ['./loader.scss']
})
export class LoaderComponent implements OnInit {
  isLoading$: Observable<boolean>;

  constructor(
    private loadingProvider: LoadingProvider
  ) { }

  ngOnInit() {
    this.isLoading$ = this.loadingProvider.getLoadingState();
  }
}

I expect the storybook to show me the actual component and that I can toggle it within a knob but there is nothing.

Answer 1

Hey I was running into the same problem, this is what I came up with. You can take advantage of setters in Angular to get it working. Sorry this reply is so late. I just had to google the answer myself and arrived here. Then found out there was no answer! aaaaah What a nightmare. cheers.

Story HTML

[SomeObservable$] = "_VARIABLE_NAME$"

Story Component

  _VARIABLE_NAME$: BehaviorSubject<WHATEVER_TYPE>;


  @Input()
  set VARIABLE_NAME(value: boolean) {
    this._VARIABLE_NAME$ = new BehaviorSubject(value);
  }

Story book knob (it doesn't need to be a boolean, you can change it to be anything the value set will go into the setter and be sent down as the observable.)

    SOME_VARIABLE_NAME: boolean('SOME_VARIABLE_NAME?', false),