Knobs with angular component not updating

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

[Silverium]

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)
    },
  }));

[blemaire]

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