**Describe the bug** `StorybookWrapperComponent` does not correctly get `@Input` and `@Output` properties from an inherited parent component. This can lead to them getting overwritten and behaving unexpectedly. As far as I was able to recreate this issue it's actually a [bug in how Angular handles it's metadata](https://github.com/angular/angular/issues/42847). Since I don't have high hopes that this gets fixed anytime soon in Angular is there interest in fixing this via a workaround in storybook? I have mitigated this issue in my local branch by iterating and merging the parent prop metadata: ``` export const getComponentPropsDecoratorMetadata = (component: any) => { const decoratorKey = '__prop__metadata__'; let propsDecorators: Record = Reflect && Reflect.getOwnPropertyDescriptor && Reflect.getOwnPropertyDescriptor(component, decoratorKey) ? Reflect.getOwnPropertyDescriptor(component, decoratorKey).value : component[decoratorKey]; // START WORKAROUND const parent = Reflect && Reflect.getPrototypeOf && Reflect.getPrototypeOf(component); if (parent) { const parentPropsDecorators = getComponentPropsDecoratorMetadata(parent); propsDecorators = { ...parentPropsDecorators, ...propsDecorators }; } // END WORKAROUND return propsDecorators; }; ``` Please let me know if we should go down this route then I will create a PR with my fix. **To Reproduce** Add these two files anywhere in the angular example in the repo:

test.component.ts

``` // eslint-disable-next-line max-classes-per-file import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'hadv-storybook-test', template: '', }) export class BaseTestComponent { private _value?: string; @Input() public get value(): string | undefined { return this._value; } public set value(value: string | undefined) { this.writeValue(value); } @Output() public get valueChange(): EventEmitter { return this.#valueChange; } #valueChange = new EventEmitter(); public writeValue(value: string | undefined) { this._value = value; this.valueChange.emit(value); } } @Component({ selector: 'storybook-test', template: '{{ value }} ', }) export class TestComponent extends BaseTestComponent { @Input() public get value(): string | undefined { return `${super.value} test`; } public set value(value: string | undefined) { super.value = value; } public changeValue(): void { this.value = (Math.random() * 100).toFixed(0); } } ```

test.component.stories.ts

``` import { Story } from '@storybook/angular'; import { TestComponent } from './test.component'; export default { title: 'Base/Test', component: TestComponent, argTypes: { valueChange: { action: 'valueChange' } }, }; export const Base: Story = (args: any) => ({ props: args, template: ` `, }); Base.args = { value: '2', }; ```

**System** Please paste the results of `npx sb@next info` here. **Additional context** Add any other context about the problem here.

Angular: Overwriting Input/Output properties of base component leads to incomplete metadata #15580

Company

Community

Support

Connect