How to display a component's internal code in storybook

I am creating a storybook with Angular 19 where I want to display a story's internal code when we click "Show Code". The "Show Code" section displays the story's usage instead of its internal code. I am aware that that's how it is intended, but I am trying to customise this behaviour.

Output for a "Button" story: Show screenshot

This shows the code as:


<storybook-button
[primary]="true"
[label]="'Button'"
(onClick)="onClick($event)"
></storybook-button>

What I exactly want the "Show Code" to display:


import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'storybook-button',
standalone: true,
imports: [CommonModule],
template: ` <button
type="button"
(click)="onClick.emit($event)"
[ngClass]="classes"
[ngStyle]="{ 'background-color': backgroundColor }"
>
{{ label }}
</button>`,
styleUrls: ['./button.css'],
})
export class ButtonComponent {
/** Is this the principal call to action on the page? */
@Input()
primary = false;

/** What background color to use */
@Input()
backgroundColor?: string;

/** How large should the button be? */
@Input()
size: 'small' | 'medium' | 'large' = 'medium';

/**
* Button contents
*
* @required
*/
@Input()
label = 'Button';

/** Optional click handler */
@Output()
onClick = new EventEmitter<Event>();

public get classes(): string[] {
const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';

return ['storybook-button', `storybook-button--${this.size}`, mode];
}
}

The entire code is here - GitHub

Continue reading...