Merge pull request #12656 from profanis/angular-decorators

docs: explain how to use the decorators in angular

docs/snippets/angular/button-story-component-decorator.ts.mdx

@@ -0,0 +1,32 @@
+```ts
+// button.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+import { ButtonComponent } from './button.component';
+
+export default {
+  title: 'Example/Button',
+  component: ButtonComponent,
+  decorators: [
+    (storyFunc) => {
+      const story = storyFunc();
+
+      return {
+        ...story,
+        template: `<div style="margin: 3em">${story.template}</div>`,
+      };
+    },
+  ],
+} as Meta;
+
+// Note:  To see the decorator applied to your component's stories you'll need to include the template key with the component's selector.
+
+const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
+  component: ButtonComponent,
+  moduleMetadata: {
+    declarations: [ButtonComponent],
+  },
+  props: args,
+  template: '<app-button label="Submit"></app-button>',
+});
+```

docs/snippets/angular/button-story-decorator.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// button.stories.ts
+
+import { ButtonComponent } from './button.component';
+
+// Note: To see the decorator applied to your component's stories you'll need to include the template key with the component's selector.
+
+export const Primary: Story<ButtonComponent> = () => ({
+  component: ButtonComponent,
+  moduleMetadata: {
+    declarations: [ButtonComponent],
+  },
+  template: '<app-button label="Submit"></app-button>',
+});
+
+Primary.decorators = [
+  (storyFunc) => {
+    const story = storyFunc();
+
+    return {
+      ...story,
+      template: `<div style="margin: 3em">${story.template}</div>`,
+    };
+  },
+];
+```

docs/snippets/angular/storybook-preview-global-decorator.ts.mdx

@@ -0,0 +1,16 @@
+```js
+// .storybook/preview.js
+
+// Note: To see the global decorator applied to your stories you'll need to include the template key with the component's selector with each story you have.
+
+export const decorators = [
+  (storyFunc) => {
+    const story = storyFunc();
+
+    return {
+      ...story,
+      template: `<div style="margin: 3em">${story.template}</div>`,
+    };
+  },
+];
+```

docs/snippets/angular/your-component-with-decorator.ts.mdx

@@ -0,0 +1,19 @@
+```ts
+// your-component.stories.ts
+
+import { Meta } from '@storybook/angular';
+
+export default {
+  component: YourComponent,
+  decorators: [
+    (storyFunc) => {
+      const story = storyFunc();
+
+      return {
+        ...story,
+        template: `<div style="margin: 3em">${story.template}</div>`,
+      };
+    },
+  ],
+} as Meta;
+```

docs/writing-stories/decorators.md

@@ -19,6 +19,7 @@ Some components require a “harness” to render in a useful way. For instance
     'react/your-component-with-decorator.js.mdx',
     'react/your-component-with-decorator.ts.mdx',
     'vue/your-component-with-decorator.js.mdx',
+    'angular/your-component-with-decorator.ts.mdx',
   ]}
 />
 
@@ -63,6 +64,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'react/button-story-decorator.js.mdx',
     'react/button-story-decorator.ts.mdx',
     'vue/button-story-decorator.js.mdx',
+    'angular/button-story-decorator.ts.mdx',
   ]}
 />
 
@@ -81,6 +83,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
     'react/button-story-component-decorator.js.mdx',
     'react/button-story-component-decorator.ts.mdx',
     'vue/button-story-component-decorator.js.mdx',
+    'angular/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -97,6 +100,7 @@ We can also set a decorator for **all stories** via the `decorators` export of y
     'react/storybook-preview-global-decorator.js.mdx',
     'react/storybook-preview-global-decorator.ts.mdx',
     'vue/storybook-preview-global-decorator.js.mdx',
+    'angular/storybook-preview-global-decorator.ts.mdx',
   ]}
 />