[@storybook/angular] [Knobs] forceRerender doesn't trigger Constructor

There seems to be no ability to force a story to use Knobs to modify the constructor of its component. Various issues have been opened about this, but they all inevitably become stale, then closed without resolution.

To Reproduce Steps to reproduce the behavior:

1. Create a component and story with the following code:

@Component({
  selector: 'mybutton',
  template:'<div>Sample</div>',
})
export class ButtonComponent implements OnInit {
  @Input() myText?: string;
  constructor() {
    console.log('I"m under construction!');
    console.log('Text is: ', this.myText);
  }
  ngOnInit() {
    console.log('I"m being initialized!');
    console.log('Text is: ', this.myText);
  }
}

import { FORCE_RE_RENDER } from '@storybook/core-events';
import { addons } from '@storybook/addons';
import { text, withKnobs, button } from '@storybook/addon-knobs';
import { ButtonComponent } from '../somewhere/component.ts';

export default { 
  title: 'Banner',
  decorators: [
    withKnobs
  ]
}
export const Sample = () => ({
  component: ButtonComponent,
  props: {
    myText: text('myText', 'Main Title'),
    button: button('Refresh', () => {
      console.log('Attempting to trigger refresh');
      addons.getChannel().emit(FORCE_RE_RENDER);
    })
  },
});

Expected Result There should be a console.log with the current value of the Knob input for both the constructor and ngOnInit every time ForceRender is run.

Failing that, there should be some way to trigger the constructor if desired, using the current value of the knobs.

System: Environment Info: System: OS: Windows Server 2016 10.0.14393 CPU: (4) x64 Intel® Xeon® CPU E5-2673 v4 @ 2.30GHz Binaries: Node: 10.16.0 - C:\Program Files\nodejs\node.EXE npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

Package.json: “@storybook/addon-actions”: “^5.2.8”, “@storybook/addon-links”: “^5.2.8”, “@storybook/addon-notes”: “^5.2.8”, “@storybook/addons”: “^5.2.8”, “@storybook/angular”: “^5.2.8”, “@storybook/addon-knobs”: “^5.2.8”, “@storybook/cli”: “^5.2.8”, Angular CLI: 8.3.20 Angular: 8.2.14 @angular-devkit/architect 0.803.20 @angular-devkit/build-angular 0.803.21 @angular-devkit/build-ng-packagr 0.803.21 @angular-devkit/build-optimizer 0.803.21 @angular-devkit/build-webpack 0.803.21 @angular-devkit/core 8.3.20 @angular-devkit/schematics 8.3.20 @angular/cdk 8.2.3 @angular/cli 8.3.20 @angular/flex-layout 8.0.0-beta.27 @angular/material 8.2.3 @ngtools/webpack 8.3.21 @schematics/angular 8.3.20 @schematics/update 0.803.20 ng-packagr 5.7.1 rxjs 6.4.0 typescript 3.5.3 webpack 4.39.2

Additional context It seems there has been some discussion about this in the past, but it inevitably ends in a “Stale” tag and the thread being locked.

https://github.com/storybookjs/storybook/issues/7002 https://github.com/storybookjs/storybook/issues/4760

Not a duplicate of:

https://github.com/storybookjs/storybook/issues/8825 https://github.com/storybookjs/storybook/issues/1736

Seems to be directly related to (Or even caused by): https://github.com/storybookjs/storybook/pull/6094

[dfagan2]

Running into the same thing

[shilman]

FYI, we’ve just released addon-controls in 6.0-beta! Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Controls w/ TS & CRA Walkthrough
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!