Storybook cannot handle data from extended components (Angular)

[AleSergio]

Describe the bug
When we are using storybook in angular and we have a component, that extends another component with data. Data is undefined even though we have assigned it in our stories component.

To Reproduce
Check the repository for more information:
https://github.com/AleSergio/storybookExtend

System
Error that I am having after running storybook:

[saggypatel]

Looks like following is related.

#15935

[GupCa]

Having the same issue during the update of the storybook from 6.1 to 6.2-6.3 and angular 10.1 to 11.
Storybook assigns such properties (from extended class) only in ngAfterViewInit hook, which is too late.

[Marklb]

I think this was fixed in PR #15586. So, v6.4.0-alpha.23 should have the fix.

I cloned the repo then upgraded to the most recent alpha and the error was gone.

[RaySheikh]

Issue still exists for #15935 when extending an angular component. tried v6.4.0-alpha.34

[GupCa]

I have tried v6.4.0-alpha.34, still exists. Can provide more information, whatever is needed.

[Marklb]

@RaySheikh #15935 does not look related to this issue. I added comment for how to fix it in that issue.

[Marklb]

@GupCa I cloned https://github.com/AleSergio/storybookExtend, then ran npm i, then started it with npm run storybook to see that I got the same error.

To fix it, I went into the package.json and updated the following.

"@compodoc/compodoc": "^1.1.14",
"@storybook/addon-actions": "^6.4.0-alpha.34",
"@storybook/addon-essentials": "^6.4.0-alpha.34",
"@storybook/addon-links": "^6.4.0-alpha.34",
"@storybook/angular": "^6.4.0-alpha.34",

Then I ran npm i, then started it with npm run storybook again and the inputs from the extended component were set without any errors.

[AleSergio]

@GupCa I cloned https://github.com/AleSergio/storybookExtend, then ran npm i, then started it with npm run storybook to see that I got the same error.

To fix it, I went into the package.json and updated the following.

"@compodoc/compodoc": "^1.1.14",
"@storybook/addon-actions": "^6.4.0-alpha.34",
"@storybook/addon-essentials": "^6.4.0-alpha.34",
"@storybook/addon-links": "^6.4.0-alpha.34",
"@storybook/angular": "^6.4.0-alpha.34",

Then I ran npm i, then started it with npm run storybook again and the inputs from the extended component were set without any errors.

Thank you updating to 6.4.0-alpha.34 solved the problem! Inputs from extended components are being displayed now.