Storybook: Knobs with angular component not updating

Created on 3 May 2019 · 9Comments · Source: storybookjs/storybook

Describe the bug
When using props on a component, the values of the knobs are not available in the component.

To Reproduce
See code snippet

Expected behavior
I expect the value within the component to be updated when I type in the text knob

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

import {storiesOf, moduleMetadata} from '@storybook/angular';
import {Component, Input} from '@angular/core';
import {withKnobs, text} from '@storybook/addon-knobs';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'simple-component',
  template: `
    {{ name || 'default' }}
    <input type="text" [(ngModel)]="name" />
  `,
})
export class SimpleComponent {
  @Input() name: string;
}

storiesOf('component', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [FormsModule],
      declarations: [SimpleComponent],
    }),
  )
  .add('notWorking', () => ({
    component: SimpleComponent,
    props: {
      name: text('Name', 'outer name'),
    },
  }));

System:

OS: [MacOS]
Browser: [chrome]
Framework: [angular]
Addons:
@storybook/addon-knobs
@storybook/addon-notes
@storybook/addon-viewport
@storybook/addon-storysource
storybook-addon-designs
Version:
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-centered": "^5.0.11",
"@storybook/addon-knobs": "^5.0.11",
"@storybook/addon-notes": "^5.0.11",
"@storybook/addon-storysource": "^5.0.11",
"@storybook/addon-viewport": "^5.0.11",
"@storybook/angular": "^5.0.11",
storybook-addon-designs: 5.0.0

Below I expected to see 'Updated' (which is the value typed in the knob)next to the input but it still shows the default value

knobs angular inactive question / support

Source

blemaire

👍5

Most helpful comment

Hey, has anybody had a chance to look at this? It's not blocking as we can wrap the component in a template but it's extra effort to duplicate the bindings when they're already there.
Thanks a lot

blemaire on 30 May 2019

👍4

All 9 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 30 May 2019

Hey, has anybody had a chance to look at this? It's not blocking as we can wrap the component in a template but it's extra effort to duplicate the bindings when they're already there.
Thanks a lot

blemaire on 30 May 2019

👍4

stale[bot] on 26 Jun 2019

I'm also seeing this issue...

QuantariusRay on 24 Jul 2019

stale[bot] on 15 Aug 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 14 Sep 2019

also having this problem

michahell on 4 May 2020

Hi all,

I've found a workaround. Use functions!!
As you may know, React is all about functions and so are knobs, with this approach, you have instant responsiveness:

...
  .add('your story here', () => ({
    template: `
        <your-component-here
                [customHeight]="height()">
        </your-component-here>
    `,
    props: {
      height: () => number('height', 50)
    },
  }));