Changing controls in storybook for angular components does not trigger ngOnChanges

[aavelyn]

Describe the bug

I've followed the angular tutorial and created a test component.
When I change the controls in storybook, which are wired to trigger changes in angulars ngOnChanges lifecycle hook, nothing happens.

To Reproduce

• Create angular storybook setup
• Create an angular component with @Input and implement the ngOnChanges lifecycle hook in that component and console.log simpleChanges
• Change in storybook that control
• nothing happens

System
Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 16.3.0 - /usr/local/bin/node
npm: 7.15.1 - /usr/local/bin/npm
Browsers:
Chrome: 91.0.4472.114
Firefox: 89.0.2
Safari: 14.0.3
npmPackages:
@storybook/addon-actions: 6.3.4 => 6.3.4
@storybook/addon-controls: 6.3.4 => 6.3.4
@storybook/addon-docs: 6.3.4 => 6.3.4
@storybook/addon-essentials: ~6.3.0 => 6.3.4
@storybook/addon-jest: 6.3.4 => 6.3.4
@storybook/addon-knobs: ~6.3.0 => 6.3.0
@storybook/addon-storysource: 6.3.4 => 6.3.4
@storybook/addon-viewport: 6.3.4 => 6.3.4
@storybook/angular: ~6.3.0 => 6.3.4
@storybook/builder-webpack5: ~6.3.0 => 6.3.4
@storybook/manager-webpack5: ~6.3.0 => 6.3.4

Other relevant dependencies

	"@angular-devkit/build-angular": "12.1.1",
	"@angular/cli": "12.1.1",
	"@angular/compiler-cli": "12.1.1",
	"@angular/language-service": "12.1.1",
	"@compodoc/compodoc": "^1.1.11",
	"@nrwl/cli": "12.5.8",
	"@nrwl/cypress": "12.5.8",
	"@nrwl/jest": "12.5.8",
	"@nrwl/storybook": "12.5.8",
	"@nrwl/tao": "12.5.8",
	"@nrwl/workspace": "12.5.8",

Additional context

[Marklb]

In case someone wants to attempt this, here are the files I think are relevant:

Method in legacy renderer that called ngOnChanges: https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts#L117

General location this probably needs to be added to: https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts#L136

I think I remember discussions from when the new rendering changes were starting that didn't think manually calling ngOnChanges would be necessary. When the changes got implemented, it probably got overlooked that it seems to still need to handle that lifecycle hook manually.

I know I hadn't noticed it being missing or thought to check for it, because I try to avoid ngOnChanges by using setters, whenever I can, for inputs that I need to do something on change.

[Marklb]

I think I found the problem and why it is happening, but still need to fix it or at least decide what to do about it. The more I think about it the more I am wondering if it is actually wrong, because I think it makes sense why ngOnChanges is not called.

@aavelyn Just to confirm that what I am seeing is correct for you also, is your story passing a template?

---

For the following component:

@Component({ selector: 'foo', template: '{{bar}}' })
class FooComponent implements OnChanges {
  @Input() bar: string;

  ngOnChanges(changes: SimpleChanges) { }
}

I have a test spying on ngOnChanges to be called, that is passing for a story like:

export const Ex = () => ({
	props: { bar: '' }
})

Then fails for a story like:

export const Ex = () => ({
	props: { bar: '' },
	template: `<foo></foo>`
})

I think it fails because when a template is provided, the props are being set on the component instance. Without a template Storybook is building the template with the inputs defined in the template and setting the props on the wrapper instance, which passes the inputs to the component from the template instead of directly on the instance.

[aavelyn]

Hi @Marklb,
my components all use the templateUrl property in the decorator, which links to an html file (as it is typical in angular).

[david-dlc-cerezo]

It also happens to me.

I'm migrating from 6.1.21 to 6.3.6 and that feature broke (along with many others)

Before, if I change a value in controls it will be updating the component, now... it do nothing.

I checked that the ngOnChanges is not triggered.

[newmankyle]

I've got a mostly similar problem. Storybook controls don't update the component's inputs.

• I'm using nrwl to scaffold storybook, building with the latest storybook (6.3.8)
• The component has a single @input(). It's a setter like so:

@Input() set inputArg(arg: string) { 
    console.log(arg);
    this.service.arg = arg;
}

• Story is setup precisely like to docs

The component will have it's input set initially if the arg is hard-coded in the doc, however subsequent updates never reach the component instance.

I see similar behavior if I load the story in an iframe and use the url-arg method

[DanaCoding]

@shilman

I have a similar problem. In the React application, Actions are not triggered.

version info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz       
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)    
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12
    @storybook/addon-essentials: ^6.3.12 => 6.3.12
    @storybook/addon-links: ^6.3.12 => 6.3.12
    @storybook/react: ^6.3.12 => 6.3.12

[stale]

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!

[aavelyn]

bump

[alc-1]

Had the same issue, but it's actually resolved since version 6.3.16 (#17156).

Try an update, I'm currently on 6.3.18 and it works fine. 👍

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.52 containing PR #17633 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.20 containing PR #17633 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[dionatan-g]

Up, this is not working in version 6.5.10. Can someone confirm it works on @latest?

[marfrede]

still facing this issue with version "@storybook/angular": "7.6.17".

strangely ngOnChanges will be triggered correctly when the components Inputs are changed on Docs-Page, but not on the "detail"-pages of the stories.