From 3146415aaf9dc078cd43d0e40e77e696fa67b2e4 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 09:17:18 +0200
Subject: [PATCH 1/6] Add argsToTemplate helper function

---
 .../angular/src/client/argsToTemplate.test.ts | 90 +++++++++++++++++++
 .../angular/src/client/argsToTemplate.ts      | 71 +++++++++++++++
 code/frameworks/angular/src/client/index.ts   |  1 +
 3 files changed, 162 insertions(+)
 create mode 100644 code/frameworks/angular/src/client/argsToTemplate.test.ts
 create mode 100644 code/frameworks/angular/src/client/argsToTemplate.ts

diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts
new file mode 100644
index 000000000000..213d34188088
--- /dev/null
+++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts
@@ -0,0 +1,90 @@
+import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path
+
+describe('argsToTemplate', () => {
+  it('should correctly convert args to template string and exclude undefined values', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: undefined,
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include properties from include option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include non-undefined properties from include option', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should exclude properties from exclude option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should exclude properties from exclude option and undefined properties', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should prioritize include over exclude when both options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop2'],
+      exclude: ['prop2', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should work when neither include nor exclude options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+});
diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts
new file mode 100644
index 000000000000..b00a6987942b
--- /dev/null
+++ b/code/frameworks/angular/src/client/argsToTemplate.ts
@@ -0,0 +1,71 @@
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+export interface ArgsToTemplateOptions<T> {
+  /**
+   * An array of keys to specifically include in the output.
+   * If provided, only the keys from this array will be included in the output,
+   * irrespective of the `exclude` option. Undefined values will still be excluded from the output.
+   */
+  include?: Array<T>;
+  /**
+   * An array of keys to specifically exclude from the output.
+   * If provided, these keys will be omitted from the output. This option is
+   * ignored if the `include` option is also provided
+   */
+  exclude?: Array<T>;
+}
+
+/**
+ * Converts an object of arguments to a string of property bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2"></example> This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1"></example> The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    template: `<example ${argsToTemplate(args)}></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *  },
+ *};
+ * ```
+ */
+export function argsToTemplate<A extends Record<string, any>>(
+  args: A,
+  options: ArgsToTemplateOptions<keyof A> = {}
+) {
+  return Object.entries(args)
+    .flatMap(([key, value]) => {
+      if (value === undefined) return [];
+
+      if (options.include) {
+        if (options.include.includes(key)) {
+          return [`[${key}]="${key}"`];
+        }
+        return [];
+      }
+
+      if (options.exclude?.includes(key)) return [];
+
+      return [`[${key}]="${key}"`];
+    })
+    .join(' ');
+}
diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts
index bfc209efb4d4..2377678bda2e 100644
--- a/code/frameworks/angular/src/client/index.ts
+++ b/code/frameworks/angular/src/client/index.ts
@@ -10,6 +10,7 @@ export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
 
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';
 
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined') module?.hot?.decline();

From c769e4b5daff0c2184424f42594195bfc605bae2 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 09:18:13 +0200
Subject: [PATCH 2/6] Rewrite Angular Stories to CSF 3

---
 .../argTypes/doc-button/doc-button.stories.ts |  35 +++--
 .../doc-directive/doc-directive.stories.ts    |  21 +--
 .../doc-injectable/doc-injectable.stories.ts  |  21 +--
 .../argTypes/doc-pipe/doc-pipe.stories.ts     |  21 +--
 .../custom-cva-component.stories.ts           |  23 ++--
 .../attribute-selectors.component.stories.ts  |   9 +-
 .../enums.component.stories.ts                |  29 ++--
 .../base-button.stories.ts                    |  11 +-
 .../icon-button.stories.ts                    |  13 +-
 .../ng-content-about-parent.stories.ts        |  36 ++---
 .../ng-content-simple.stories.ts              |  32 +++--
 .../component-with-on-destroy.stories.ts      |   8 +-
 .../component-with-on-push/on-push.stories.ts |  18 +--
 .../custom-pipes.stories.ts                   |  37 ++---
 .../di.component.stories.ts                   |  36 ++---
 .../styled.component.stories.ts               |  11 +-
 ...ut-selector-ng-component-outlet.stories.ts |  45 +++---
 ...ut-selector-ng-factory-resolver.stories.ts |  71 ----------
 .../without-selector.stories.ts               |  34 +++--
 .../ng-module/import-module-chip.stories.ts   |  24 ++--
 .../import-module-for-root.stories.ts         |  42 +++---
 .../basics/ng-module/import-module.stories.ts |  43 +++---
 .../decorators.stories.ts                     | 129 ++++++++++--------
 .../parameters/bootstrap-options.stories.ts   |  12 +-
 .../app-initializer-use-factory.stories.ts    |   6 +-
 .../issues/12009-unknown-component.stories.ts |  17 +--
 26 files changed, 408 insertions(+), 376 deletions(-)
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
index d23f3896359f..11dc4d7cd32d 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
@@ -1,24 +1,29 @@
-import { Args } from '@storybook/angular';
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
 import { DocButtonComponent } from './doc-button.component';
 
-export default {
+const meta: Meta<DocButtonComponent<any>> = {
   component: DocButtonComponent,
 };
 
-export const Basic = (args: Args) => ({
-  props: args,
-});
-Basic.args = { label: 'Args test', isDisabled: false };
-Basic.ArgTypes = {
-  theDefaultValue: {
-    table: {
-      defaultValue: { summary: 'Basic default value' },
+export default meta;
+
+type Story = StoryObj<DocButtonComponent<any>>;
+
+export const Basic: Story = {
+  args: { label: 'Args test', isDisabled: false },
+  argTypes: {
+    theDefaultValue: {
+      table: {
+        defaultValue: { summary: 'Basic default value' },
+      },
     },
   },
 };
 
-export const WithTemplate = (args: Args) => ({
-  props: args,
-  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
-});
-WithTemplate.args = { label: 'Template test', appearance: 'primary' };
+export const WithTemplate: Story = {
+  args: { label: 'Template test', appearance: 'primary' },
+  render: (args) => ({
+    props: args,
+    template: `<my-button ${argsToTemplate(args)}></my-button>`,
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
index b734b93bf40d..e949d8e88252 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocDirective } from './doc-directive.directive';
 
-export default {
+const meta: Meta<DocDirective> = {
   component: DocDirective,
 };
 
-const modules = {
-  declarations: [DocDirective],
-};
+export default meta;
+
+type Story = StoryObj<DocDirective>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocDirective],
+    },
+    template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
index eca5e10fb11d..7741bca9ba88 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocInjectableService } from './doc-injectable.service';
 
-export default {
+const meta: Meta<DocInjectableService> = {
   component: DocInjectableService,
 };
 
-const modules = {
-  provider: [DocInjectableService],
-};
+export default meta;
+
+type Story = StoryObj<DocInjectableService>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div><h1>DocInjectable</h1></div>',
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      providers: [DocInjectableService],
+    },
+    template: '<div><h1>DocInjectable</h1></div>',
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
index 6ab616f16ee2..018ab04a9951 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocPipe } from './doc-pipe.pipe';
 
-export default {
+const meta: Meta<DocPipe> = {
   component: DocPipe,
 };
 
-const modules = {
-  declarations: [DocPipe],
-};
+export default meta;
+
+type Story = StoryObj<DocPipe>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocPipe],
+    },
+    template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
index 228e2d7b9045..c5fb49653135 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
@@ -1,8 +1,8 @@
 import { FormsModule } from '@angular/forms';
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
-export default {
+const meta: Meta<CustomCvaComponent> = {
   // title: 'Basics / Angular forms / ControlValueAccessor',
   component: CustomCvaComponent,
   decorators: [
@@ -17,11 +17,16 @@ export default {
   ],
 } as Meta;
 
-export const SimpleInput: StoryFn = () => ({
-  props: {
-    ngModel: 'Type anything',
-    ngModelChange: () => {},
-  },
-});
+export default meta;
 
-SimpleInput.storyName = 'Simple input';
+type Story = StoryObj<CustomCvaComponent>;
+
+export const SimpleInput: Story = {
+  storyName: 'Simple input',
+  render: () => ({
+    props: {
+      ngModel: 'Type anything',
+      ngModelChange: () => {},
+    },
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
index d935de5215d7..73894b83b34a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
@@ -1,8 +1,13 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { AttributeSelectorComponent } from './attribute-selector.component';
 
-export default {
+const meta: Meta<AttributeSelectorComponent> = {
   // title: 'Basics / Component / With Complex Selectors',
   component: AttributeSelectorComponent,
 };
 
-export const AttributeSelectors = {};
+export default meta;
+
+type Story = StoryObj<AttributeSelectorComponent>;
+
+export const AttributeSelectors: Story = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
index 647ca86d8d67..b79bd371baf3 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import {
   EnumsComponent,
   EnumNumeric,
@@ -6,19 +6,22 @@ import {
   EnumStringValues,
 } from './enums.component';
 
-export default {
+const meta: Meta<EnumsComponent> = {
   // title: 'Basics / Component / With Enum Types',
   component: EnumsComponent,
-} as Meta;
+};
+
+export default meta;
+
+type Story = StoryObj<EnumsComponent>;
 
-export const Basic: StoryFn = (args) => ({
-  props: args,
-});
-Basic.args = {
-  unionType: 'union a',
-  aliasedUnionType: 'Type Alias 1',
-  enumNumeric: EnumNumeric.FIRST,
-  enumNumericInitial: EnumNumericInitial.UNO,
-  enumStrings: EnumStringValues.PRIMARY,
-  enumAlias: EnumNumeric.FIRST,
+export const Basic: Story = {
+  args: {
+    unionType: 'Union A',
+    aliasedUnionType: 'Type Alias 1',
+    enumNumeric: EnumNumeric.FIRST,
+    enumNumericInitial: EnumNumericInitial.UNO,
+    enumStrings: EnumStringValues.PRIMARY,
+    enumAlias: EnumNumeric.FIRST,
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
index a206115f5de7..271e6a3fcc9d 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
@@ -1,12 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { BaseButtonComponent } from './base-button.component';
 
-export default {
+const meta: Meta<BaseButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: BaseButtonComponent,
 };
 
-export const BaseButton = () => ({
-  props: {
+export default meta;
+
+export const BaseButton: StoryObj<BaseButtonComponent> = {
+  args: {
     label: 'this is label',
   },
-});
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
index baefe65c4f58..bb5c5fb02bcb 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
@@ -1,13 +1,18 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { IconButtonComponent } from './icon-button.component';
 
-export default {
+const meta: Meta<IconButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: IconButtonComponent,
 };
 
-export const IconButton = () => ({
-  props: {
+export default meta;
+
+type Story = StoryObj<IconButtonComponent>;
+
+export const IconButton: Story = {
+  args: {
     icon: 'this is icon',
     label: 'this is label',
   },
-});
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index 0512582aca6e..ae936092f96b 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, StoryFn, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'sb-button',
@@ -17,7 +17,7 @@ class SbButtonComponent {
   color = '#5eadf5';
 }
 
-export default {
+const meta: Meta<SbButtonComponent> = {
   // title: 'Basics / Component / With ng-content / Button with different contents',
   // Implicitly declares the component to Angular
   // This will be the component described by the addon docs
@@ -35,24 +35,24 @@ export default {
   },
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<SbButtonComponent>;
+
 // By default storybook uses the default export component if no template or component is defined in the story
 // So Storybook nests the component twice because it is first added by the componentWrapperDecorator.
-export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({});
+export const AlwaysDefineTemplateOrComponent: Story = {};
 
-export const EmptyButton: StoryFn = () => ({
-  template: '',
-});
-
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args['content']}`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const EmptyButton: Story = {
+  render: () => ({
+    template: '',
+  }),
 };
-WithDynamicContentAndArgs.args = { content: 'My button text' };
 
-export const InH1: StoryFn = () => ({
-  template: 'My button in h1',
-});
-InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
-InH1.storyName = 'In <h1>';
+export const InH1: Story = {
+  render: () => ({
+    template: 'My button in h1',
+  }),
+  decorators: [componentWrapperDecorator((story) => `<h1>${story}</h1>`)],
+  storyName: 'In <h1>',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
index 13cc2eb550c5..71b0fe84df38 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { Meta, StoryFn } from '@storybook/angular/';
+import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-with-ng-content',
@@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/';
 })
 class WithNgContentComponent {}
 
-export default {
+const meta: Meta<WithNgContentComponent> = {
   // title: 'Basics / Component / With ng-content / Simple',
   component: WithNgContentComponent,
 } as Meta;
 
-export const OnlyComponent: StoryFn = () => ({});
+export default meta;
 
-export const Default: StoryFn = () => ({
-  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
-});
+type Story = StoryObj<WithNgContentComponent & { content: string }>;
 
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const OnlyComponent: Story = {};
+
+export const Default: Story = {
+  render: () => ({
+    template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
+  }),
+};
+
+export const WithDynamicContentAndArgs: Story = {
+  render: (args) => ({
+    template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
+  }),
+  args: { content: 'Default content' },
+  argTypes: {
+    content: { control: 'text' },
+  },
 };
-WithDynamicContentAndArgs.args = { content: 'Default content' };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
index b833424367bb..9ac53d2dde03 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
@@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
   }
 }
 
-export default {
+const meta: Meta<OnDestroyComponent> = {
   // title: 'Basics / Component / with ngOnDestroy',
   component: OnDestroyComponent,
   parameters: {
@@ -37,4 +37,8 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: StoryObj = {};
+export default meta;
+
+type Story = StoryObj<OnDestroyComponent>;
+
+export const SimpleComponent: Story = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
index 6ad452797bc2..5da4366a606f 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
-export default {
+const meta: Meta<OnPushBoxComponent> = {
   // title: 'Basics / Component / With OnPush strategy',
   component: OnPushBoxComponent,
   argTypes: {
@@ -12,10 +12,12 @@ export default {
     word: 'The text',
     bgColor: '#FFF000',
   },
-} as Meta;
+};
 
-export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({
-  props: args,
-});
-ClassSpecifiedComponentWithOnPushAndArgs.storyName =
-  'Class-specified component with OnPush and Args';
+export default meta;
+
+type Story = StoryObj<OnPushBoxComponent>;
+
+export const ClassSpecifiedComponentWithOnPushAndArgs: Story = {
+  storyName: 'Class-specified component with OnPush and Args',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
index 6c8f9254208f..e9c3037b28ec 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
@@ -1,9 +1,9 @@
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
 
-export default {
+const meta: Meta<WithPipeComponent> = {
   // title: 'Basics / Component / With Pipes',
   component: WithPipeComponent,
   decorators: [
@@ -11,21 +11,26 @@ export default {
       declarations: [CustomPipePipe],
     }),
   ],
-} as Meta;
+};
 
-export const Simple: StoryFn = () => ({
-  props: {
-    field: 'foobar',
-  },
-});
+export default meta;
+
+type Story = StoryObj<WithPipeComponent>;
 
-export const WithArgsStory: StoryFn = (args) => ({
-  props: args,
-});
-WithArgsStory.storyName = 'With args';
-WithArgsStory.argTypes = {
-  field: { control: 'text' },
+export const Simple: Story = {
+  render: () => ({
+    props: {
+      field: 'foobar',
+    },
+  }),
 };
-WithArgsStory.args = {
-  field: 'Foo Bar',
+
+export const WithArgsStory: Story = {
+  storyName: 'With args',
+  argTypes: {
+    field: { control: 'text' },
+  },
+  args: {
+    field: 'Foo Bar',
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
index fea1bc95c15f..2b676f567d23 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
@@ -1,26 +1,30 @@
-import { Args } from '@storybook/angular';
+import { Args, Meta, StoryObj } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
-export default {
+const meta: Meta<DiComponent> = {
   // title: 'Basics / Component / With Provider',
   component: DiComponent,
 };
 
-export const InputsAndInjectDependencies = () => ({
-  props: {
-    title: 'Component dependencies',
-  },
-});
+export default meta;
 
-InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
+type Story = StoryObj<DiComponent>;
 
-export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
-  props: args,
-});
-InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
-InputsAndInjectDependenciesWithArgs.argTypes = {
-  title: { control: 'text' },
+export const InputsAndInjectDependencies: Story = {
+  render: () => ({
+    props: {
+      title: 'Component dependencies',
+    },
+  }),
+  storyName: 'inputs and inject dependencies',
 };
-InputsAndInjectDependenciesWithArgs.args = {
-  title: 'Component dependencies',
+
+export const InputsAndInjectDependenciesWithArgs: Story = {
+  storyName: 'inputs and inject dependencies with args',
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    title: 'Component dependencies',
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
index 0818ff28cc6f..32116ba05090 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
@@ -1,10 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { StyledComponent } from './styled.component';
 
-export default {
+const meta: Meta = {
   // title: 'Basics / Component / With StyleUrls',
   component: StyledComponent,
 };
 
-export const ComponentWithStyles = () => ({});
+export default meta;
 
-ComponentWithStyles.storyName = 'Component with styles';
+type Story = StoryObj<StyledComponent>;
+
+export const ComponentWithStyles: Story = {
+  storyName: 'Component with styles',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index beff6c157988..5e7cbabee628 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -1,8 +1,8 @@
 import { OnInit, Type, Component, Injector, Input } from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { Meta, componentWrapperDecorator, moduleMetadata, StoryObj } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
   component: WithoutSelectorComponent,
   decorators: [
@@ -12,6 +12,10 @@ export default {
   ],
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
 // Advanced example with custom *ngComponentOutlet
 
 @Component({
@@ -51,23 +55,22 @@ class NgComponentOutletWrapperComponent implements OnInit {
 
 // Live changing of args by controls does not work at the moment. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({
-  props: args,
-});
-WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet';
-WithCustomNgComponentOutletWrapper.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' };
-WithCustomNgComponentOutletWrapper.decorators = [
-  moduleMetadata({
-    declarations: [NgComponentOutletWrapperComponent],
-  }),
-  componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
-    name: args.name,
+export const WithCustomNgComponentOutletWrapper: Story = {
+  storyName: 'Custom wrapper *NgComponentOutlet',
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
+  },
+  args: { name: 'Color', color: 'green' },
+  decorators: [
+    moduleMetadata({
+      declarations: [NgComponentOutletWrapperComponent],
+    }),
+    componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
+      name: args.name,
 
-    color: args['color'],
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];
+      color: args['color'],
+      componentOutlet: WithoutSelectorComponent,
+    })),
+  ],
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
deleted file mode 100644
index 5256c9de2894..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  AfterViewInit,
-  ComponentFactoryResolver,
-  Type,
-  Component,
-  Input,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
-
-import { WithoutSelectorComponent } from './without-selector.component';
-
-export default {
-  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
-  component: WithoutSelectorComponent,
-  decorators: [
-    moduleMetadata({
-      entryComponents: [WithoutSelectorComponent],
-    }),
-  ],
-} as Meta;
-
-// Advanced example with custom ComponentFactoryResolver
-
-@Component({ selector: 'component-factory-wrapper', template: '' })
-class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
-
-  @Input()
-  componentOutlet?: Type<unknown>;
-
-  @Input()
-  args: any;
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
-
-  ngAfterViewInit() {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet!
-    );
-    const containerRef = this.viewContainerRef;
-    containerRef.clear();
-    const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance as any, this.args);
-  }
-}
-
-// Live changing of args by controls does not work at the moment. When changing args storybook does not fully
-// reload and therefore does not take into account the change of provider.
-export const WithComponentFactoryResolver: StoryFn = (args) => ({
-  props: args,
-});
-WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver';
-WithComponentFactoryResolver.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' };
-WithComponentFactoryResolver.decorators = [
-  moduleMetadata({
-    declarations: [ComponentFactoryWrapperComponent],
-  }),
-  componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({
-    args,
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
index dec59310b0c3..a7f635252a69 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
@@ -1,7 +1,7 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryObj, Meta, moduleMetadata } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector',
   component: WithoutSelectorComponent,
   decorators: [
@@ -11,20 +11,26 @@ export default {
   ],
 } as Meta;
 
-export const SimpleComponent: StoryFn = () => ({});
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
+export const SimpleComponent: Story = {};
 
 // Live changing of args by controls does not work for now. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
-  props: args,
-  moduleMetadata: {
-    providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
-    ],
+export const WithInjectionTokenAndArgs: StoryObj = {
+  render: (args) => ({
+    props: args,
+    moduleMetadata: {
+      providers: [
+        { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
+      ],
+    },
+  }),
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
   },
-});
-WithInjectionTokenAndArgs.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
+  args: { name: 'Color', color: 'red' },
 };
-WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' };
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
index 14e163e3b9d8..3c3f58851125 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
@@ -1,23 +1,25 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipComponent } from './angular-src/chip.component';
 
-export default {
+const meta: Meta<ChipComponent> = {
   component: ChipComponent,
   decorators: [
     moduleMetadata({
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
+};
 
-export const Chip: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-Chip.args = {
-  displayText: 'Chip',
-};
-Chip.argTypes = {
-  removeClicked: { action: 'Remove icon clicked' },
+type Story = StoryObj<ChipComponent>;
+
+export const Chip: Story = {
+  args: {
+    displayText: 'Chip',
+  },
+  argTypes: {
+    removeClicked: { action: 'Remove icon clicked' },
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
index 4777d60ccb5b..f94dd25d1b50 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
@@ -1,9 +1,9 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { CHIP_COLOR } from './angular-src/chip-color.token';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / forRoot() pattern',
   component: ChipsGroupComponent,
   decorators: [
@@ -27,24 +27,26 @@ export default {
     removeChipClick: { action: 'Remove chip' },
     removeAllChipsClick: { action: 'Remove all chips clicked' },
   },
-} as Meta;
+};
 
-const Template = (): StoryFn => (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Base = Template();
-Base.storyName = 'Chips group';
+type Story = StoryObj<ChipsGroupComponent>;
 
-export const WithCustomProvider = Template();
-WithCustomProvider.decorators = [
-  moduleMetadata({
-    providers: [
-      {
-        provide: CHIP_COLOR,
-        useValue: 'yellow',
-      },
-    ],
-  }),
-];
-WithCustomProvider.storyName = 'Chips group with overridden provider';
+export const Base = {
+  storyName: 'Chips group',
+};
+
+export const WithCustomProvider = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: CHIP_COLOR,
+          useValue: 'yellow',
+        },
+      ],
+    }),
+  ],
+  storyName: 'Chips group with overridden provider',
+};
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
index 936f27235df7..83c250fc0856 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
@@ -1,8 +1,8 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / Module with multiple component',
   component: ChipsGroupComponent,
   decorators: [
@@ -10,26 +10,27 @@ export default {
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
+};
 
-export const ChipsGroup: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-ChipsGroup.args = {
-  chips: [
-    {
-      id: 1,
-      text: 'Chip 1',
-    },
-    {
-      id: 2,
-      text: 'Chip 2',
-    },
-  ],
-};
+type Story = StoryObj<ChipsGroupComponent>;
 
-ChipsGroup.argTypes = {
-  removeChipClick: { action: 'Remove chip' },
-  removeAllChipsClick: { action: 'Remove all chips clicked' },
+export const ChipsGroup: Story = {
+  args: {
+    chips: [
+      {
+        id: 1,
+        text: 'Chip 1',
+      },
+      {
+        id: 2,
+        text: 'Chip 2',
+      },
+    ],
+  },
+  argTypes: {
+    removeChipClick: { action: 'Remove chip' },
+    removeAllChipsClick: { action: 'Remove all chips clicked' },
+  },
 };
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
index 0a69ddb34aba..78fa47cf8c00 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
@@ -1,10 +1,16 @@
 // your-component.stories.ts
 
-import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import {
+  Args,
+  Meta,
+  StoryObj,
+  componentWrapperDecorator,
+  moduleMetadata,
+} from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
-export default {
+const meta: Meta<ChildComponent> = {
   // title: 'Core / Decorators / ComponentWrapperDecorator',
   component: ChildComponent,
   decorators: [
@@ -14,72 +20,79 @@ export default {
   ],
   args: { childText: 'Child text', childPrivateText: 'Child private text' },
   argTypes: { onClickChild: { action: 'onClickChild' } },
-} as Meta;
+};
 
-export const WithTemplate = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
+export default meta;
 
-export const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
+type Story = StoryObj<ChildComponent>;
 
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
+export const WithTemplate: Story = {
+  render: (args: Args) => ({
+    template: `Child Template`,
+    props: args,
+  }),
+};
 
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
+export const WithComponent: Story = {};
 
-export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndProps.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, {
-    parentText: 'Parent text',
-    onClickParent: () => {
-      console.log('onClickParent');
+export const WithLegacyComponent: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+};
+
+export const WithComponentWrapperDecorator: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent),
+  ],
+};
+
+export const WithComponentWrapperDecoratorAndProps: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
     },
   }),
-];
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, {
+      parentText: 'Parent text',
+      onClickParent: () => {
+        console.log('onClickParent');
+      },
+    }),
+  ],
+};
 
-export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
+export const WithComponentWrapperDecoratorAndArgs: StoryObj<{
+  parentText: string;
+  onClickParent: () => void;
+}> = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
+    },
+  }),
+  argTypes: {
+    parentText: { control: { type: 'text' } },
+    onClickParent: { action: 'onClickParent' },
   },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, ({ args }) => ({
+      parentText: args.parentText,
+      onClickParent: args.onClickParent,
+    })),
+  ],
 };
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
 
 export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
index d49a6b4ef4f7..527b10a0082f 100644
--- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
+++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { Component } from '@angular/core';
 
 @Component({
@@ -10,9 +10,13 @@ import { Component } from '@angular/core';
 })
 class ComponentWithWhitespace {}
 
-export default {
+const meta: Meta<ComponentWithWhitespace> = {
   // title: 'Core / Parameters / With Bootstrap Options',
   component: ComponentWithWhitespace,
-} as Meta;
+};
 
-export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
+export default meta;
+
+type Story = StoryObj<ComponentWithWhitespace>;
+
+export const WithPreserveWhitespaces: Story = {};
diff --git a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
index 2dc73b7ad3a0..32c5d1ebe296 100644
--- a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
+++ b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
@@ -1,4 +1,4 @@
-import { moduleMetadata, Meta } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { APP_INITIALIZER } from '@angular/core';
 import { action } from '@storybook/addon-actions';
 import Button from '../../button.component';
@@ -27,7 +27,9 @@ const meta: Meta<Button> = {
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<Button>;
+
+export const Default: Story = {
   args: {
     text: 'Button',
   },
diff --git a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
index 24948e1af79d..f3cf0a9495af 100644
--- a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
+++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
@@ -1,14 +1,15 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import Button from '../../button.component';
 
-export default {
+const meta: Meta<Button> = {
   // title: 'Others / Issues / 12009 unknown component',
   component: Button,
-} as Meta;
+};
 
-const Template: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Basic = Template.bind({});
-Basic.args = { text: 'Unknown component' };
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {
+  args: { text: 'Unknown component' },
+};

From a42f7b97e4f07987343d78816d4e5b32ed3e329a Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 10:25:56 +0200
Subject: [PATCH 3/6] Support event bindings in argsToTemplate

---
 .../angular/src/client/argsToTemplate.test.ts | 12 ++++++
 .../angular/src/client/argsToTemplate.ts      | 37 ++++++++++---------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts
index 213d34188088..88db1208a6ee 100644
--- a/code/frameworks/angular/src/client/argsToTemplate.test.ts
+++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts
@@ -87,4 +87,16 @@ describe('argsToTemplate', () => {
     const result = argsToTemplate(args, options);
     expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
   });
+
+  it('should bind events correctly when value is a function', () => {
+    const args = { event1: () => {}, event2: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+  });
+
+  it('should mix properties and events correctly', () => {
+    const args = { input: 'Value1', event1: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+  });
 });
diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts
index b00a6987942b..0072aa84743d 100644
--- a/code/frameworks/angular/src/client/argsToTemplate.ts
+++ b/code/frameworks/angular/src/client/argsToTemplate.ts
@@ -19,7 +19,7 @@ export interface ArgsToTemplateOptions<T> {
 }
 
 /**
- * Converts an object of arguments to a string of property bindings and excludes undefined values.
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
  * Why? Because Angular treats undefined values in property bindings as an actual value
  * and does not apply the default value of the property as soon as the binding is set.
  * This feels counter-intuitive and is a common source of bugs in stories.
@@ -30,6 +30,7 @@ export interface ArgsToTemplateOptions<T> {
  *  export class ExampleComponent {
  *   ㅤ@Input() input1: string = 'Default Input1';
  *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
  *  }
  *
  * // component.stories.ts
@@ -37,13 +38,17 @@ export interface ArgsToTemplateOptions<T> {
  * export const Input1: Story = {
  *  render: (args) => ({
  *    props: args,
- *    // Problem1: <example [input1]="input1" [input2]="input2"></example> This will set input2 to undefined and the internal default value will not be used.
- *    // Problem2: <example [input1]="input1"></example> The default value of input2 will be used, but it is not overridable by the user via controls.
- *    template: `<example ${argsToTemplate(args)}></example>`,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
  *  }),
  *  args: {
  *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
  *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
  *  },
  *};
  * ```
@@ -52,20 +57,18 @@ export function argsToTemplate<A extends Record<string, any>>(
   args: A,
   options: ArgsToTemplateOptions<keyof A> = {}
 ) {
-  return Object.entries(args)
-    .flatMap(([key, value]) => {
-      if (value === undefined) return [];
-
-      if (options.include) {
-        if (options.include.includes(key)) {
-          return [`[${key}]="${key}"`];
-        }
-        return [];
-      }
+  const includeSet = options.include ? new Set(options.include) : null;
+  const excludeSet = options.exclude ? new Set(options.exclude) : null;
 
-      if (options.exclude?.includes(key)) return [];
-
-      return [`[${key}]="${key}"`];
+  return Object.entries(args)
+    .filter(([key]) => args[key] !== undefined)
+    .filter(([key]) => {
+      if (includeSet) return includeSet.has(key);
+      if (excludeSet) return !excludeSet.has(key);
+      return true;
     })
+    .map(([key, value]) =>
+      typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`
+    )
     .join(' ');
 }

From 79c2381a9b59c87786959594d91ee3af2c0cefc8 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 10:45:32 +0200
Subject: [PATCH 4/6] Update docs to mention argsToTemplate

---
 .../angular/button-story-click-handler-args.ts.mdx       | 9 ++++++++-
 docs/snippets/angular/button-story-click-handler.ts.mdx  | 1 +
 .../component-story-with-custom-render-function.ts.mdx   | 7 ++++---
 docs/snippets/angular/page-story-slots.ts.mdx            | 3 ++-
 4 files changed, 15 insertions(+), 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
index 76e7798c81fc..9af82cee3503 100644
--- 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
index 7d8159824699..e721c3886cd4 100644
--- 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
index 7894bbf57045..603291c742a6 100644
--- 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
index 63ac7f3309cc..54e1896d9205 100644
--- 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>`,
   }),

From 7bec7b3a79577a5d369ce946afd2d127960de804 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 11:17:00 +0200
Subject: [PATCH 5/6] Replace 'storyName' with 'name' in Angular stories

---
 .../custom-cva-component.stories.ts                       | 2 +-
 .../ng-content-about-parent.stories.ts                    | 4 ++--
 .../basics/component-with-on-push/on-push.stories.ts      | 2 +-
 .../basics/component-with-pipe/custom-pipes.stories.ts    | 2 +-
 .../component-with-provider/di.component.stories.ts       | 4 ++--
 .../component-with-style/styled.component.stories.ts      | 2 +-
 .../without-selector-ng-component-outlet.stories.ts       | 2 +-
 .../basics/ng-module/import-module-for-root.stories.ts    | 8 ++++----
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
index c5fb49653135..0396bae99acc 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<CustomCvaComponent>;
 
 export const SimpleInput: Story = {
-  storyName: 'Simple input',
+  name: 'Simple input',
   render: () => ({
     props: {
       ngModel: 'Type anything',
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index ae936092f96b..f8185f8eb80a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { componentWrapperDecorator, Meta, StoryFn, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'sb-button',
@@ -54,5 +54,5 @@ export const InH1: Story = {
     template: 'My button in h1',
   }),
   decorators: [componentWrapperDecorator((story) => `<h1>${story}</h1>`)],
-  storyName: 'In <h1>',
+  name: 'In <h1>',
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
index 5da4366a606f..cc672938a7f2 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
@@ -19,5 +19,5 @@ export default meta;
 type Story = StoryObj<OnPushBoxComponent>;
 
 export const ClassSpecifiedComponentWithOnPushAndArgs: Story = {
-  storyName: 'Class-specified component with OnPush and Args',
+  name: 'Class-specified component with OnPush and Args',
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
index e9c3037b28ec..9a4a8e53c577 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
@@ -26,7 +26,7 @@ export const Simple: Story = {
 };
 
 export const WithArgsStory: Story = {
-  storyName: 'With args',
+  name: 'With args',
   argTypes: {
     field: { control: 'text' },
   },
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
index 2b676f567d23..381c272fb96d 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
@@ -16,11 +16,11 @@ export const InputsAndInjectDependencies: Story = {
       title: 'Component dependencies',
     },
   }),
-  storyName: 'inputs and inject dependencies',
+  name: 'inputs and inject dependencies',
 };
 
 export const InputsAndInjectDependenciesWithArgs: Story = {
-  storyName: 'inputs and inject dependencies with args',
+  name: 'inputs and inject dependencies with args',
   argTypes: {
     title: { control: 'text' },
   },
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
index 32116ba05090..c0cd88c09bc2 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
@@ -11,5 +11,5 @@ export default meta;
 type Story = StoryObj<StyledComponent>;
 
 export const ComponentWithStyles: Story = {
-  storyName: 'Component with styles',
+  name: 'Component with styles',
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index 5e7cbabee628..3c0327c64a71 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -56,7 +56,7 @@ class NgComponentOutletWrapperComponent implements OnInit {
 // Live changing of args by controls does not work at the moment. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
 export const WithCustomNgComponentOutletWrapper: Story = {
-  storyName: 'Custom wrapper *NgComponentOutlet',
+  name: 'Custom wrapper *NgComponentOutlet',
   argTypes: {
     name: { control: 'text' },
     color: { control: 'color' },
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
index f94dd25d1b50..6902672b66b5 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
@@ -33,11 +33,11 @@ export default meta;
 
 type Story = StoryObj<ChipsGroupComponent>;
 
-export const Base = {
-  storyName: 'Chips group',
+export const Base: Story = {
+  name: 'Chips group',
 };
 
-export const WithCustomProvider = {
+export const WithCustomProvider: Story = {
   decorators: [
     moduleMetadata({
       providers: [
@@ -48,5 +48,5 @@ export const WithCustomProvider = {
       ],
     }),
   ],
-  storyName: 'Chips group with overridden provider',
+  name: 'Chips group with overridden provider',
 };

From a1fdb683b6d2d631b2c45b91b9c99776200ff8ae Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 11 Oct 2023 11:29:58 +0200
Subject: [PATCH 6/6] Add Stories to cover argsToTemplate functionality

---
 .../template.component.ts                     | 27 +++++++++++++++++++
 .../template.stories.ts                       | 24 +++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts

diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts
new file mode 100644
index 000000000000..2071a6db7738
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-template',
+  imports: [CommonModule],
+  template: `<div (click)="event($event)">
+    Label: {{ label }}
+    <br />
+    Label2: {{ label2 }}
+    <br />
+    <button (click)="inc()">+</button>
+  </div>`,
+  styles: [],
+  standalone: true,
+})
+export class Template {
+  @Input() label = 'default label';
+
+  @Input() label2 = 'default label2';
+
+  @Output() changed = new EventEmitter<string>();
+
+  inc() {
+    this.changed.emit('Increase');
+  }
+}
diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts
new file mode 100644
index 000000000000..55639870f262
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts
@@ -0,0 +1,24 @@
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
+import { Template } from './template.component';
+
+const meta: Meta<Template> = {
+  component: Template,
+};
+
+export default meta;
+
+type Story = StoryObj<Template>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-template ${argsToTemplate(args)}></app-template>`,
+  }),
+};
+
+export const SetOneInput: Story = {
+  ...Default,
+  args: {
+    label: 'Label Example 1',
+  },
+};