Update docs to mention argsToTemplate

storybookjs · Oct 11, 2023 · 79c2381 · 79c2381
1 parent a42f7b9
commit 79c2381
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -2,6 +2,7 @@
 // Button.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
 
 import { action } from '@storybook/addon-actions';
 
@@ -17,7 +18,13 @@ type Story = StoryObj<Button>;
 export const Text: Story = {
   render: (args) => ({
     props: args,
-    template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
+    // The argsToTemplate helper function converts the args to property and event bindings.
+    // You could also write the template in plain HTML and bind to the component's inputs and outputs yourself:
+    // <storybook-button ["label"]="label" (onClick)="onClick($event)">
+    // We don't recommend the latter since it can conflict with how Storybook applies arguments via its controls addon.
+    // Binding to the component's inputs and outputs yourself will conflict with default values set inside the component's class.
+    // In edge-case scenarios, you may need to define the template yourself, though.
+    template: `<storybook-button ${argsToTemplate(args)}></storybook-button>`,
   }),
   args: {
     label: 'Hello',

diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx
@@ -20,6 +20,7 @@ export const Text: Story = {
       label: 'Button',
       onClick: action('clicked'),
     },
+    template: `<storybook-button [label]="label" (onClick)="onClick($event)"></storybook-button>`,
   }),
 };
 ```
diff --git a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { moduleMetadata } from '@storybook/angular';
+import { moduleMetadata, argsToTemplate } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -26,14 +26,15 @@ type Story = StoryObj<MyComponent>;
 
 // This story uses a render function to fully control how the component renders.
 export const Example: Story = {
-  render: () => ({
+  render: (args) => ({
+    props: args,
     template: `
       <app-layout>
         <header>
           <h1>Example</h1>
         </header>
         <article>
-          <app-my-component></app-my-component>
+          <app-my-component ${argsToTemplate(args)}></app-my-component>
         </article>
       </app-layout>
     `,

diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -2,6 +2,7 @@
 // Page.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
 
 import { Page } from './page.component';
 
@@ -12,7 +13,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
   render: ({ footer, ...args }) => ({
     props: args,
     template: `
-      <storybook-page>
+      <storybook-page ${argsToTemplate(args)}>
         <ng-container footer>${footer}</ng-container>
       </storybook-page>`,
   }),