[Bug]: Storybook for Angular doesn't map host directive inputs

[snortblt]

Describe the bug

When creating a story for a component that includes host directives, storybook doesn't provide the inputs to the directive. Additionally, the declared interface of the component class is used to enforce type safety in the story so the host directive inputs are not seen as valid properties.

Reproduction link

https://stackblitz.com/edit/github-6ta5gcj5?file=src%2Fstories%2Fdemo.component.ts

@Directive({
  selector: '[plTest]',
  standalone: true,
})
export class TestDirective {

  someInput = input();

  constructor() {
    console.log('created directive');

    effect(() => {
      console.log('someInput', this.someInput()); // THIS SHOULD LOG THE VALUE PROVIDED FROM THE STORY. IT DOESN'T.
    });
  }
}

@Component({
  selector: 'pl-demo',
  template: `
    <div>This is a demo
    </div>
  `,
  hostDirectives: [{ directive: TestDirective, inputs: ['someInput'] }],
})
export class DemoComponent {
   // HACK: suggested workaround is to re-declare the mapped input here to make SB happy. 
  // someInput = input();  
}

Reproduction steps

1. Go to the above link. Open the console. Note there is no valid output logged from the default value provided for someValue in the story

System

storybook@8.5.5

Additional context

Same code works just fine in an angular application

[smlimasu]

Just wanted to share another workaround for this long existing issue ... (also, just fixing compodocs hostdirective inputs as inputs does not seem to fix the underlying problem)

You can set these types up like this (I have it in a shared utils file for all my HostDirectiveTypes), so that you don't need to pollute your component library with the re-declared input, only the stories:

type HostDirectiveTypes = {
  someInput: TestDirective['someInput'];
};
type DemoComponentWithHostDirective = DemoComponent & HostDirectiveTypes;

const meta: Meta<DemoComponentWithHostDirective> = {
  title: 'Example/Demo',
  component: DemoComponent,
  args: {
    someInput: 42,
  },
  render: (args) => ({
    props: args,
    template: `<pl-demo ${argsToTemplate(args)}></pl-demo>`,
  }),
};

export default meta;
type Story = StoryObj<DemoComponentWithHostDirective>;

Hint: In most cases, this does not work without applying a template string, sadly ...

[inmativ]

We are faced with the same problem.
And I was able to figure out how to get around this problem using template string.

[kouji-dev]

I'm facing the same issue.
it looks like here
https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts#L25
we are not extracting input/output meta data from hostDirectives.

Possible solution:
loop through host directives and extract rescursively the input types mentionned in the Component decorator. anyone willing to work on this ?