[Bug]: Angular [Show code] should render self-closing tags

[NateRadebaugh]

Describe the bug

Self-closing tags are supported in Angular templates since v16. .

Before

<hello-world></hello-world>

After

<hello-world />

Reproduction link

https://stackblitz.com/github/storybookjs/sandboxes/tree/next/angular-cli/default-ts/after-storybook?file=src%2Fstories%2Fbutton.stories.ts&preset=node

Reproduction steps

1. Open any Angular Docs page with [Show code]
2. Click [Show code]

Expected: examples should be rendered as self-closing
Actual: examples show with a separate closing tag

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (134.0.3124.68)
  npmPackages:
    @storybook/addon-docs: ^10.0.5 => 10.0.5 
    @storybook/angular: ^10.0.5 => 10.0.5    
    storybook: ^10.0.5 => 10.0.5

Additional context

No response

[dosubot]

Hi @NateRadebaugh! I'm Dosu and I’m helping the storybook team.

Storybook's Angular [Show code] feature currently renders custom component tags with separate closing tags (e.g., <hello-world></hello-world>) even in Angular v16+, where self-closing tags are supported. This is because the code only generates self-closing tags for standard HTML void elements, not for Angular components, and does not detect or adapt to the Angular version in use. There is no configuration or transform to change this behavior at the moment. If you need self-closing tags, you would need to customize the template generation logic in your Storybook setup or request this feature upstream. For reference, see the relevant implementation in Storybook's Angular integration here.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[NateRadebaugh]

@dosu how would I customize the template generation logic in my Storybook setup?

[dosubot]

To render Angular components as self-closing tags in Storybook's [Show code], you'll need to patch the Storybook source. The logic lives in ComputesTemplateFromComponent.ts, specifically the buildTemplate function. By default, it only outputs self-closing tags for standard HTML void elements, not for Angular components.

To change this, you can:

1. Locate the buildTemplate function in your local Storybook install (node_modules/@storybook/angular/.../ComputesTemplateFromComponent.ts).
2. Update the logic so that, for Angular v16+, your component selectors are treated as self-closing. For example, you could add a check for the Angular version and/or for custom selectors, and output <hello-world /> instead of <hello-world></hello-world>.
3. Use a tool like patch-package to maintain this change across upgrades.

Example patch (pseudo-code):

const isAngularComponent = /* your logic to detect custom selectors */;
const isAngular16OrAbove = /* your logic to detect Angular version */;
if (isAngularComponent && isAngular16OrAbove) {
  return `<${selector}${inputs}${outputs} />`;
}

There’s no config or extension point for this, so a patch or fork is required. Be aware you’ll need to maintain this with Storybook updates. If this is important for your workflow, consider proposing it as a feature upstream so others can benefit too.

Reference: Relevant code section

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}