[Bug]: Angular - Source Code view doesn’t show args mapping

[valentinpalkovic]

Describe the bug

The source view always shows the element rendered without any properties.

Reproduction steps

1. Create a story for an Angular components
2. Write a story with some arguments defined for the component
3. Go to the autodocs page and open the Source code view
4. The args aren't shown

Additional context

No response

[greptile-apps]

To fix the issue where the source view doesn't show args mapping for Angular components, follow these steps:

1. Update sourceDecorator in sourceDecorator.ts:
   Ensure that the props are correctly passed and used to generate the template source.

   if (component && !userDefinedTemplate) {
     const source = computesTemplateSourceFromComponent(component, props, argTypes);
     if (source || template) {
       toEmit = source || template;
     }
   } else if (template) {
     toEmit = template;
   }

2. Check doc-button.stories.ts:
   Ensure that args are correctly defined and passed to the template.

   export const WithTemplate: Story = {
     args: { label: 'Template test', appearance: 'primary' },
     render: (args) => ({
       props: args,
       template: `<my-button ${argsToTemplate(args)}></my-button>`,
     }),
   };

These changes ensure that the args are correctly mapped and displayed in the source view.

References

/code/frameworks/angular/src/client/docs/sourceDecorator.ts
/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[JSMike]

Can we get a full reproduction of this? Are you setting up compodoc in the preview.ts? This works as expected in the current sandbox for Angular default.