Changing controls in storybook for angular components does not trigger ngOnChanges

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® Core™ 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

[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.

[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.