From a2d74f964db1b037442ca67fbb33b990f29c94ad Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 15:24:30 +1000
Subject: [PATCH 1/5] Move over a bunch of angular-cli stories

---
 .../parameters/layout.parameters.stories.ts   |  31 -----
 .../ngrx-store.stories.storyshot              |  21 ----
 .../stories/others/ngrx/ngrx-store.stories.ts |  50 --------
 .../stories/basics/README.stories.mdx         |   0
 .../custom-cva-component.stories.storyshot    |   0
 .../custom-cva-component.stories.ts           |   0
 .../custom-cva.component.ts                   |   0
 ...tiple-selector.component.stories.storyshot |   0
 .../attribute-selector.component.ts           |   0
 .../class-selector.component.ts               |   0
 .../multiple-selector.component.stories.ts    |   0
 .../multiple-selector.component.ts            |   0
 .../enums.component.stories.storyshot         |   0
 .../component-with-enums/enums.component.html |   0
 .../enums.component.stories.ts                |   0
 .../component-with-enums/enums.component.ts   |   0
 .../inheritance.stories.storyshot             |   0
 .../base-button.component.ts                  |   0
 .../icon-button.component.ts                  |   0
 .../inheritance.stories.ts                    |   0
 .../ng-content-about-parent.stories.storyshot |   0
 .../ng-content-simple.stories.storyshot       |   0
 .../ng-content-about-parent.stories.ts        |   0
 .../ng-content-simple.stories.ts              |   0
 .../component-with-on-destroy.stories.ts      |   0
 .../__snapshots__/on-push.stories.storyshot   |   0
 .../on-push-box.component.ts                  |   0
 .../component-with-on-push/on-push.stories.ts |   0
 .../custom-pipes.stories.storyshot            |   0
 .../custom-pipes.stories.ts                   |   0
 .../basics/component-with-pipe/custom.pipe.ts |   0
 .../with-pipe.component.ts                    |   0
 .../di.component.stories.storyshot            |   0
 .../component-with-provider/di.component.html |   0
 .../di.component.stories.ts                   |   0
 .../component-with-provider/di.component.ts   |   0
 .../styled.component.stories.storyshot        |   0
 .../component-with-style/styled.component.css |   0
 .../styled.component.html                     |   0
 .../styled.component.scss                     |   0
 .../styled.component.stories.ts               |   0
 .../component-with-style/styled.component.ts  |   0
 ...ctor-ng-component-outlet.stories.storyshot |   0
 ...ctor-ng-factory-resolver.stories.storyshot |   0
 .../without-selector.stories.storyshot        |   0
 ...ut-selector-ng-component-outlet.stories.ts |   0
 ...ut-selector-ng-factory-resolver.stories.ts |   0
 .../without-selector.component.ts             |   0
 .../without-selector.stories.ts               |   0
 .../import-module-for-root.stories.storyshot  |   0
 .../import-module.stories.storyshot           |   0
 .../ng-module/angular-src/chip-color.token.ts |   0
 .../ng-module/angular-src/chip-text.pipe.ts   |   0
 .../ng-module/angular-src/chip.component.ts   |   0
 .../angular-src/chips-group.component.ts      |   0
 .../ng-module/angular-src/chips.module.ts     |   0
 .../import-module-for-root.stories.ts         |   0
 .../basics/ng-module/import-module.stories.ts |   0
 .../template/stories/button.component.ts      |  26 ++++
 .../template/stories/child.component.ts       |  20 ---
 .../template}/stories/core/README.stories.mdx |   0
 .../decorators.stories.storyshot              |   0
 .../child.component.ts                        |   0
 .../decorators.stories.ts                     |   0
 .../parent.component.ts                       |   0
 .../decorators.stories.storyshot              |   0
 .../theme-decorator/decorators.stories.ts     |   0
 .../in-export-default.stories.storyshot       |   0
 .../in-stories.stories.storyshot              |   0
 .../merge-default-and-story.stories.storyshot |   0
 .../moduleMetadata/angular-src/custom.pipe.ts |   0
 .../angular-src/dummy.service.ts              |   0
 .../angular-src/service.component.ts          |   0
 .../angular-src/token.component.ts            |   0
 .../in-export-default.stories.ts              |   0
 .../core/moduleMetadata/in-stories.stories.ts |   0
 .../merge-default-and-story.stories.ts        |   0
 .../all-parameters.stories.storyshot          |   0
 .../bootstrap-options.stories.storyshot       |   0
 .../layout.parameters.stories.storyshot       |   0
 .../parameters/bootstrap-options.stories.ts   |   0
 .../story-styles.stories.storyshot            |   0
 .../core/styles/story-styles.stories.ts       |   2 +-
 .../template/stories/decorators.stories.ts    | 117 ------------------
 .../stories/legacy/README.stories.mdx         |   0
 .../component-in-story.stories.storyshot      |   0
 .../legacy/component-in-story.stories.ts      |   2 +-
 .../issues/12009-unknown-component.stories.ts |   2 +-
 .../12009-unknown-component.stories.storyshot |   0
 .../others/ngx-translate/README.stories.mdx   |   0
 .../template/stories/parent.component.ts      |  18 ---
 91 files changed, 29 insertions(+), 260 deletions(-)
 delete mode 100644 code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
 delete mode 100644 code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
 delete mode 100644 code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/attribute-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/class-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/multiple-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/base-button.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/icon-button.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/inheritance.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/ng-content-simple.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/on-push-box.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/on-push.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/custom-pipes.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/custom.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/with-pipe.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.css (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.scss (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip-color.token.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip-text.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chips-group.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chips.module.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/import-module-for-root.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/import-module.stories.ts (100%)
 create mode 100644 code/frameworks/angular/template/stories/button.component.ts
 delete mode 100644 code/frameworks/angular/template/stories/child.component.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/child.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/parent.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/theme-decorator/decorators.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/custom.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/dummy.service.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/service.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/token.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/in-export-default.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/in-stories.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/merge-default-and-story.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/bootstrap-options.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/styles/__snapshots__/story-styles.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/styles/story-styles.stories.ts (96%)
 delete mode 100644 code/frameworks/angular/template/stories/decorators.stories.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/__snapshots__/component-in-story.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/component-in-story.stories.ts (85%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/issues/12009-unknown-component.stories.ts (87%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/ngx-translate/README.stories.mdx (100%)
 delete mode 100644 code/frameworks/angular/template/stories/parent.component.ts

diff --git a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
deleted file mode 100644
index 4bdc282a8167..000000000000
--- a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
-
-export default {
-  title: 'Core / Parameters / Layout',
-  component: Button,
-} as Meta;
-
-export const Default: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-
-export const Fullscreen: StoryFn = () => ({
-  template: `<div style="background-color: yellow;"><storybook-button-component text="Button"></storybook-button-component></div>`,
-});
-Fullscreen.parameters = { layout: 'fullscreen' };
-
-export const Centered: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-Centered.parameters = { layout: 'centered' };
-
-export const Padded: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-Padded.parameters = { layout: 'padded' };
-
-export const None: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-None.parameters = { layout: 'none' };
diff --git a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot b/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
deleted file mode 100644
index 2d1d3d8fbcac..000000000000
--- a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Others / NgRx / Store With Component 1`] = `
-<storybook-wrapper>
-  <storybook-comp-with-store>
-    <div>
-      Store is injected
-    </div>
-  </storybook-comp-with-store>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Others / NgRx / Store With Template 1`] = `
-<storybook-wrapper>
-  <storybook-comp-with-store>
-    <div>
-      Store is injected
-    </div>
-  </storybook-comp-with-store>
-</storybook-wrapper>
-`;
diff --git a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts b/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
deleted file mode 100644
index ba24cf01b114..000000000000
--- a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Store, StoreModule } from '@ngrx/store';
-import { Component } from '@angular/core';
-
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-
-@Component({
-  selector: 'storybook-comp-with-store',
-  template: '<div>{{this.getStoreState()}}</div>',
-})
-class WithStoreComponent {
-  private store: Store<any>;
-
-  constructor(store: Store<any>) {
-    this.store = store;
-  }
-
-  getStoreState() {
-    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
-  }
-}
-
-export default {
-  title: 'Others / NgRx / Store',
-  decorators: [
-    moduleMetadata({
-      imports: [
-        StoreModule.forRoot(
-          {},
-          {
-            runtimeChecks: {
-              strictStateImmutability: true,
-              strictActionImmutability: true,
-              strictStateSerializability: true,
-              strictActionSerializability: true,
-            },
-          }
-        ),
-      ],
-      declarations: [WithStoreComponent],
-    }),
-  ],
-} as Meta;
-
-export const WithComponent: StoryFn = () => ({
-  component: WithStoreComponent,
-});
-
-export const WithTemplate: StoryFn = () => ({
-  template: `<storybook-comp-with-store></storybook-comp-with-store>`,
-});
diff --git a/code/examples/angular-cli/src/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/README.stories.mdx
rename to code/frameworks/angular/template/stories/basics/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts
diff --git a/code/examples/angular-cli/src/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
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
diff --git a/code/frameworks/angular/template/stories/button.component.ts b/code/frameworks/angular/template/stories/button.component.ts
new file mode 100644
index 000000000000..da804e507b7d
--- /dev/null
+++ b/code/frameworks/angular/template/stories/button.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-button-component',
+  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
+  styles: [
+    `
+      button {
+        border: 1px solid #eee;
+        border-radius: 3px;
+        background-color: #ffffff;
+        cursor: pointer;
+        font-size: 15px;
+        padding: 3px 10px;
+        margin: 10px;
+      }
+    `,
+  ],
+})
+export default class ButtonComponent {
+  @Input()
+  text = '';
+
+  @Output()
+  onClick = new EventEmitter<any>();
+}
diff --git a/code/frameworks/angular/template/stories/child.component.ts b/code/frameworks/angular/template/stories/child.component.ts
deleted file mode 100644
index 4666ec952ad1..000000000000
--- a/code/frameworks/angular/template/stories/child.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'child-component',
-  template: `
-    Child<br />
-    Input text: {{ childText }} <br />
-    Output : <button (click)="onClickChild.emit($event)">Click here !</button> <br />
-    Private text: {{ childPrivateText }} <br />
-  `,
-})
-export default class ChildComponent {
-  @Input()
-  childText = '';
-
-  childPrivateText = '';
-
-  @Output()
-  onClickChild = new EventEmitter<any>();
-}
diff --git a/code/examples/angular-cli/src/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/README.stories.mdx
rename to code/frameworks/angular/template/stories/core/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
rename to code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts
rename to code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts
rename to code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
rename to code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
similarity index 96%
rename from code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts
rename to code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
index a8fb561efc94..b5aa89a92779 100644
--- a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts
+++ b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
+import Button from '../../button.component';
 
 export default {
   title: 'Core / Story host styles',
diff --git a/code/frameworks/angular/template/stories/decorators.stories.ts b/code/frameworks/angular/template/stories/decorators.stories.ts
deleted file mode 100644
index 14cd21b924a6..000000000000
--- a/code/frameworks/angular/template/stories/decorators.stories.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-// your-component.stories.ts
-
-import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
-import ChildComponent from './child.component';
-import ParentComponent from './parent.component';
-
-export default {
-  title: 'Core / Decorators / ComponentWrapperDecorator',
-  component: ChildComponent,
-  decorators: [
-    componentWrapperDecorator(
-      (story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
-    ),
-  ],
-  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 const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
-
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
-
-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 WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
-};
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
-
-export const WithCustomDecorator = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-WithCustomDecorator.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];
-
-export const AngularLegacyRendering = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-AngularLegacyRendering.parameters = { angularLegacyRendering: true };
-AngularLegacyRendering.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];
diff --git a/code/examples/angular-cli/src/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/legacy/README.stories.mdx
rename to code/frameworks/angular/template/stories/legacy/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
rename to code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
similarity index 85%
rename from code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts
rename to code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
index f42d2fb016c8..abea9a804956 100644
--- a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts
+++ b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../angular-demo';
+import Button from '../button.component';
 
 export default {
   title: 'Legacy / Component in Story',
diff --git a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
similarity index 87%
rename from code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts
rename to code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
index a084c754feac..cf60b13e18fe 100644
--- a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts
+++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
+import Button from '../../button.component';
 
 export default {
   title: 'Others / Issues / 12009 unknown component',
diff --git a/code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
rename to code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx
rename to code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
diff --git a/code/frameworks/angular/template/stories/parent.component.ts b/code/frameworks/angular/template/stories/parent.component.ts
deleted file mode 100644
index f49ce1bb1873..000000000000
--- a/code/frameworks/angular/template/stories/parent.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'parent-component',
-  template: `
-    Parent<br />
-    Input text: {{ parentText }} <br />
-    Output : <button (click)="onClickParent.emit($event)">Click here !</button> <br />
-    <div style="margin: 3em; border:solid;"><ng-content></ng-content></div>
-  `,
-})
-export default class ParentComponent {
-  @Input()
-  parentText = '';
-
-  @Output()
-  onClickParent = new EventEmitter<any>();
-}

From 2caa680d057e72ad91de9fee205d6fbca41ba871 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 15:46:06 +1000
Subject: [PATCH 2/5] Fix typing issues in angular renderer stories

---
 .../custom-cva.component.ts                   |  2 +-
 .../component-with-enums/enums.component.ts   | 12 +++++-----
 .../base-button.component.ts                  |  2 +-
 .../icon-button.component.ts                  |  2 +-
 .../ng-content-about-parent.stories.ts        |  6 +++--
 .../ng-content-simple.stories.ts              |  3 ++-
 .../component-with-on-destroy.stories.ts      |  2 +-
 .../on-push-box.component.ts                  |  4 ++--
 .../with-pipe.component.ts                    |  2 +-
 .../di.component.stories.ts                   |  3 ++-
 .../component-with-provider/di.component.ts   |  2 +-
 ...ut-selector-ng-component-outlet.stories.ts | 11 +++++-----
 ...ut-selector-ng-factory-resolver.stories.ts |  8 +++----
 .../without-selector.stories.ts               |  3 ++-
 .../ng-module/angular-src/chip.component.ts   |  2 +-
 .../angular-src/chips-group.component.ts      |  2 +-
 .../decorators.stories.ts                     | 22 +++++++++----------
 .../theme-decorator/decorators.stories.ts     |  7 +++---
 .../angular-src/service.component.ts          |  6 ++---
 19 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
index 3806d30ac5e8..ee2209c940fc 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
@@ -18,7 +18,7 @@ const NOOP = () => {};
   ],
 })
 export class CustomCvaComponent implements ControlValueAccessor {
-  disabled: boolean;
+  disabled?: boolean;
 
   protected onChange: (value: any) => void = NOOP;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
index 48e781942386..822aeaff17e1 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
@@ -9,22 +9,22 @@ import { Component, Input } from '@angular/core';
 })
 export class EnumsComponent {
   /** Union Type of string literals */
-  @Input() unionType: 'Union A' | 'Union B' | 'Union C';
+  @Input() unionType?: 'Union A' | 'Union B' | 'Union C';
 
   /** Union Type assigned as a Type Alias */
-  @Input() aliasedUnionType: TypeAlias;
+  @Input() aliasedUnionType?: TypeAlias;
 
   /** Base Enum Type with no assigned values */
-  @Input() enumNumeric: EnumNumeric;
+  @Input() enumNumeric?: EnumNumeric;
 
   /** Enum with initial numeric value and auto-incrementing subsequent values */
-  @Input() enumNumericInitial: EnumNumericInitial;
+  @Input() enumNumericInitial?: EnumNumericInitial;
 
   /** Enum with string values */
-  @Input() enumStrings: EnumStringValues;
+  @Input() enumStrings?: EnumStringValues;
 
   /** Type Aliased Enum Type */
-  @Input() enumAlias: EnumAlias;
+  @Input() enumAlias?: EnumAlias;
 }
 
 /**
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
index 6afc2f20cce8..0cd694506d50 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class BaseButtonComponent {
   @Input()
-  label: string;
+  label?: string;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
index 82ff17cf9e96..3994a3de2a97 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
@@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component';
 })
 export class IconButtonComponent extends BaseButtonComponent {
   @Input()
-  icon: string;
+  icon?: string;
 }
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 6978b39c44dc..d11354fdbcd7 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
@@ -28,7 +28,8 @@ export default {
     // Wrap all stories with this template
     componentWrapperDecorator(
       (story) => `<sb-button [color]="propsColor">${story}</sb-button>`,
-      ({ args }) => ({ propsColor: args.color })
+      // eslint-disable-next-line dot-notation
+      ({ args }) => ({ propsColor: args['color'] })
     ),
   ],
   argTypes: {
@@ -45,7 +46,8 @@ export const EmptyButton: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args.content}`,
+  // eslint-disable-next-line dot-notation
+  template: `${args['content']}`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },
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 ee684e74c191..71a00a66ce77 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
@@ -21,7 +21,8 @@ export const Default: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
+  // eslint-disable-next-line dot-notation
+  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },
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 6e12aae1c444..b3b571af3992 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
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
     📝 The current time in console should no longer display after a change of story`,
 })
 class OnDestroyComponent implements OnInit, OnDestroy {
-  time: string;
+  time?: string;
 
   interval: any;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
index e35ada4b1c5b..b6bf293f1b0e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
@@ -15,7 +15,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OnPushBoxComponent {
-  @Input() word: string;
+  @Input() word?: string;
 
-  @Input() @HostBinding('style.background-color') bgColor: string;
+  @Input() @HostBinding('style.background-color') bgColor?: string;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
index 0ea676d121d6..4582170ecf73 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class WithPipeComponent {
   @Input()
-  field;
+  field: any;
 }
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 e0ae1cfb912e..1c3bcc2407a8 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,3 +1,4 @@
+import type { Args } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
 export default {
@@ -13,7 +14,7 @@ export const InputsAndInjectDependencies = () => ({
 
 InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
 
-export const InputsAndInjectDependenciesWithArgs = (args) => ({
+export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
   props: args,
 });
 InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
index fbca49cbc42a..a91b4524000f 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
@@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken<string>('test');
 })
 export class DiComponent {
   @Input()
-  title: string;
+  title?: string;
 
   constructor(
     protected injector: Injector,
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 b082edf4f23c..acb5c89a24c7 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
@@ -22,15 +22,15 @@ export default {
 })
 class NgComponentOutletWrapperComponent implements OnInit {
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
-  name: string;
+  name?: string;
 
   @Input()
-  color: string;
+  color?: string;
 
-  componentInjector: Injector;
+  componentInjector?: Injector;
 
   componentContent = [
     [document.createTextNode('Ng-content : Inspired by ')],
@@ -67,7 +67,8 @@ WithCustomNgComponentOutletWrapper.decorators = [
   }),
   componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
     name: args.name,
-    color: args.color,
+    // eslint-disable-next-line dot-notation
+    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
index bea49c9a82d1..0573a66fad54 100644
--- 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
@@ -25,10 +25,10 @@ export default {
 
 @Component({ selector: 'component-factory-wrapper', template: '' })
 class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert;
+  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
 
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
   args: any;
@@ -41,12 +41,12 @@ class ComponentFactoryWrapperComponent implements AfterViewInit {
 
   ngAfterViewInit() {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet
+      this.componentOutlet!
     );
     const containerRef = this.viewContainerRef;
     containerRef.clear();
     const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance, this.args);
+    Object.assign(dynamicComponent.instance as any, this.args);
   }
 }
 
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 d0660093f45d..6d2f8b490a70 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
@@ -19,7 +19,8 @@ export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
   props: args,
   moduleMetadata: {
     providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
+      // eslint-disable-next-line dot-notation
+      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
     ],
   },
 });
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
index 18ae3440a582..249adb2598ed 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
@@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token';
   ],
 })
 export class ChipComponent {
-  @Input() displayText: string;
+  @Input() displayText?: string;
 
   @Output() removeClicked = new EventEmitter();
 
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
index 8969e188e90c..787596400fb9 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
@@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   ],
 })
 export class ChipsGroupComponent {
-  @Input() chips: {
+  @Input() chips?: {
     id: number;
     text: string;
   }[];
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 1f4b61b9bec9..14cd21b924a6 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,6 +1,6 @@
 // your-component.stories.ts
 
-import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
@@ -16,27 +16,27 @@ export default {
   argTypes: { onClickChild: { action: 'onClickChild' } },
 } as Meta;
 
-export const WithTemplate = (args) => ({
+export const WithTemplate = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
   },
 });
 
-export const WithComponent = (args) => ({
+export const WithComponent = (args: Args) => ({
   props: {
     ...args,
   },
 });
 
-export const WithLegacyComponent = (args) => ({
+export const WithLegacyComponent = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
   },
 });
 
-export const WithComponentWrapperDecorator = (args) => ({
+export const WithComponentWrapperDecorator = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -47,7 +47,7 @@ WithComponentWrapperDecorator.decorators = [
   componentWrapperDecorator(ParentComponent),
 ];
 
-export const WithComponentWrapperDecoratorAndProps = (args) => ({
+export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -63,7 +63,7 @@ WithComponentWrapperDecoratorAndProps.decorators = [
   }),
 ];
 
-export const WithComponentWrapperDecoratorAndArgs = (args) => ({
+export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -81,7 +81,7 @@ WithComponentWrapperDecoratorAndArgs.decorators = [
   })),
 ];
 
-export const WithCustomDecorator = (args) => ({
+export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -96,9 +96,9 @@ WithCustomDecorator.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
 
-export const AngularLegacyRendering = (args) => ({
+export const AngularLegacyRendering = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -114,4 +114,4 @@ AngularLegacyRendering.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index c3890ea87095..591bee3a59dc 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,16 +1,17 @@
-import { componentWrapperDecorator, Meta } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
 
 export default {
   title: 'Core / Decorators / Theme Decorators',
   decorators: [
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
-      ({ globals }) => ({ myTheme: `${globals.theme}-theme` })
+      // eslint-disable-next-line dot-notation
+      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
     ),
   ],
 } as Meta;
 
-export const Base = (args) => ({
+export const Base = (args: Args) => ({
   template: 'Change theme with the brush in toolbar',
   props: {
     ...args,
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
index 2d84bac39628..c0513fd344b6 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
@@ -11,15 +11,15 @@ import { DummyService } from './dummy.service';
   `,
 })
 export class ServiceComponent implements OnInit {
-  items: {};
+  items?: {};
 
   @Input()
-  name: any;
+  name?: any;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(private dummy: DummyService) {}
 
   async ngOnInit() {
-    this.items = await this.dummy.getItems();
+    this.items = (await this.dummy.getItems()) as any;
   }
 }

From a8c44cab5eb8aee81fbfea30fabaf4e5d79415c5 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 20:13:57 +1000
Subject: [PATCH 3/5] Drop titles and use autotitle where possible

---
 .../stories/basics/README.stories.mdx         |  2 +-
 .../custom-cva-component.stories.ts           |  2 +-
 .../multiple-selector.component.stories.ts    |  3 +-
 .../enums.component.stories.ts                |  2 +-
 .../inheritance.stories.ts                    |  3 +-
 .../ng-content-about-parent.stories.ts        |  2 +-
 .../ng-content-simple.stories.ts              |  2 +-
 .../component-with-on-destroy.stories.ts      |  2 +-
 .../component-with-on-push/on-push.stories.ts |  2 +-
 .../custom-pipes.stories.ts                   |  2 +-
 .../di.component.stories.ts                   |  2 +-
 .../styled.component.stories.ts               |  2 +-
 ...ut-selector-ng-component-outlet.stories.ts |  2 +-
 ...ut-selector-ng-factory-resolver.stories.ts |  2 +-
 .../without-selector.stories.ts               |  2 +-
 .../import-module-for-root.stories.ts         |  2 +-
 .../basics/ng-module/import-module.stories.ts |  3 +-
 .../template/stories/core/README.stories.mdx  |  2 +-
 .../decorators.stories.ts                     |  2 +-
 .../theme-decorator/decorators.stories.ts     | 17 +++++-----
 .../in-export-default.stories.ts              | 33 ++++++++++---------
 .../core/moduleMetadata/in-stories.stories.ts |  9 ++---
 .../merge-default-and-story.stories.ts        | 27 +++++++--------
 .../parameters/bootstrap-options.stories.ts   |  4 +--
 .../core/styles/story-styles.stories.ts       | 19 ++++++-----
 .../stories/legacy/README.stories.mdx         |  2 +-
 .../legacy/component-in-story.stories.ts      |  9 ++---
 .../issues/12009-unknown-component.stories.ts |  2 +-
 .../others/ngx-translate/README.stories.mdx   |  2 +-
 29 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.stories.mdx
index 3b97cc376bcb..4af25e032e7b 100644
--- a/code/frameworks/angular/template/stories/basics/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/basics/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Basics / Readme" />
+<Meta title="stories / frameworks / angular / basics / README" />
 
 # Examples for Angular features
 
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 c23f4f49f1b0..83adcf4def85 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
@@ -3,7 +3,7 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
 export default {
-  title: 'Basics / Angular forms / ControlValueAccessor',
+  // title: 'Basics / Angular forms / ControlValueAccessor',
   component: CustomCvaComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
index c898a0511409..fdab41391c32 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
@@ -6,7 +6,8 @@ import { AttributeSelectorComponent } from './attribute-selector.component';
 import { ClassSelectorComponent } from './class-selector.component';
 
 export default {
-  title: 'Basics / Component / With Complex Selectors',
+  // title: 'Basics / Component / With Complex Selectors',
+  component: MultipleClassSelectorComponent,
 };
 
 export const MultipleSelectors = () => ({
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 0a5774b3a525..2f4696dd65ef 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
@@ -7,7 +7,7 @@ import {
 } from './enums.component';
 
 export default {
-  title: 'Basics / Component / With Enum Types',
+  // title: 'Basics / Component / With Enum Types',
   component: EnumsComponent,
 } as Meta;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
index bf1e6a05082e..90e05e739105 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
@@ -2,7 +2,8 @@ import { IconButtonComponent } from './icon-button.component';
 import { BaseButtonComponent } from './base-button.component';
 
 export default {
-  title: 'Basics / Component / With Inheritance',
+  // title: 'Basics / Component / With Inheritance',
+  component: IconButtonComponent,
 };
 
 export const IconButton = () => ({
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 d11354fdbcd7..e24e128d7b25 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
@@ -20,7 +20,7 @@ class SbButtonComponent {
 }
 
 export default {
-  title: 'Basics / Component / With ng-content / Button with different contents',
+  // 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
   component: SbButtonComponent,
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 71a00a66ce77..4a6ccdd5d16a 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
@@ -10,7 +10,7 @@ import type { Meta, StoryFn } from '@storybook/angular/';
 class WithNgContentComponent {}
 
 export default {
-  title: 'Basics / Component / With ng-content / Simple',
+  // title: 'Basics / Component / With ng-content / Simple',
   component: WithNgContentComponent,
 } as Meta;
 
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 b3b571af3992..1e5a1f39ef7b 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
@@ -28,7 +28,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
 }
 
 export default {
-  title: 'Basics / Component / with ngOnDestroy',
+  // title: 'Basics / Component / with ngOnDestroy',
   component: OnDestroyComponent,
   parameters: {
     // disabled due to new Date()
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 b39e3adb75c0..6ad452797bc2 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
@@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
 export default {
-  title: 'Basics / Component / With OnPush strategy',
+  // title: 'Basics / Component / With OnPush strategy',
   component: OnPushBoxComponent,
   argTypes: {
     word: { control: 'text' },
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 95602e0d7800..cb15d4482dc1 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
@@ -4,7 +4,7 @@ import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
 
 export default {
-  title: 'Basics / Component / With Pipes',
+  // title: 'Basics / Component / With Pipes',
   component: WithPipeComponent,
   decorators: [
     moduleMetadata({
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 1c3bcc2407a8..0478c7da5833 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
@@ -2,7 +2,7 @@ import type { Args } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
 export default {
-  title: 'Basics / Component / With Provider',
+  // title: 'Basics / Component / With Provider',
   component: DiComponent,
 };
 
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 c986f00bec88..0818ff28cc6f 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,7 +1,7 @@
 import { StyledComponent } from './styled.component';
 
 export default {
-  title: 'Basics / Component / With StyleUrls',
+  // title: 'Basics / Component / With StyleUrls',
   component: StyledComponent,
 };
 
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 acb5c89a24c7..d6c83fd28e1b 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
@@ -3,7 +3,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
+  // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
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
index 0573a66fad54..682b4f0254e9 100644
--- 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
@@ -12,7 +12,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
 import { WithoutSelectorComponent } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
+  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
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 6d2f8b490a70..e74c76dde1e7 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
@@ -2,7 +2,7 @@ import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector',
+  // title: 'Basics / Component / without selector',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
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 835d295059d3..3b8de245912d 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
@@ -4,7 +4,7 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { CHIP_COLOR } from './angular-src/chip-color.token';
 
 export default {
-  title: 'Basics / NgModule / forRoot() pattern',
+  // title: 'Basics / NgModule / forRoot() pattern',
   component: ChipsGroupComponent,
   decorators: [
     moduleMetadata({
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 3de0e32eb5b2..d183ea4726ec 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
@@ -4,7 +4,8 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { ChipComponent } from './angular-src/chip.component';
 
 export default {
-  title: 'Basics / NgModule / Module with multiple component',
+  // title: 'Basics / NgModule / Module with multiple component',
+  component: ChipsGroupComponent,
   decorators: [
     moduleMetadata({
       imports: [ChipsModule],
diff --git a/code/frameworks/angular/template/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.stories.mdx
index 8313b10a94f6..15dbdc282625 100644
--- a/code/frameworks/angular/template/stories/core/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/core/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Core / Readme" />
+<Meta title="stories / frameworks / angular / core / README" />
 
 # Examples for Storybook native features
 
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 14cd21b924a6..12ae88e9a195 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
@@ -5,7 +5,7 @@ import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
 export default {
-  title: 'Core / Decorators / ComponentWrapperDecorator',
+  // title: 'Core / Decorators / ComponentWrapperDecorator',
   component: ChildComponent,
   decorators: [
     componentWrapperDecorator(
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index 591bee3a59dc..ee8e3ad31d35 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,7 +1,15 @@
 import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
 
+export const Base = (args: Args) => ({
+  template: 'Change theme with the brush in toolbar',
+  props: {
+    ...args,
+  },
+});
+
 export default {
-  title: 'Core / Decorators / Theme Decorators',
+  // title: 'Core / Decorators / Theme Decorators',
+  component: Base,
   decorators: [
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
@@ -10,10 +18,3 @@ export default {
     ),
   ],
 } as Meta;
-
-export const Base = (args: Args) => ({
-  template: 'Change theme with the brush in toolbar',
-  props: {
-    ...args,
-  },
-});
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
index ad05fd12f07a..8d4d6f174e15 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
@@ -1,8 +1,24 @@
 import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
+export const Story1: StoryFn = () => ({
+  template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
+  props: {
+    name: 'Prop Name',
+  },
+});
+
+Story1.storyName = 'Story 1';
+
+export const Story2: StoryFn = () => ({
+  template: `<storybook-simple-token-component></storybook-simple-token-component>`,
+});
+
+Story2.storyName = 'Story 2';
+
 export default {
-  title: 'Core / ModuleMetadata / In export default with decorator',
+  // title: 'Core / ModuleMetadata / In export default with decorator',
+  component: Story1,
   decorators: [
     moduleMetadata({
       imports: [],
@@ -20,18 +36,3 @@ export default {
     }),
   ],
 } as Meta;
-
-export const Story1: StoryFn = () => ({
-  template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
-  props: {
-    name: 'Prop Name',
-  },
-});
-
-Story1.storyName = 'Story 1';
-
-export const Story2: StoryFn = () => ({
-  template: `<storybook-simple-token-component></storybook-simple-token-component>`,
-});
-
-Story2.storyName = 'Story 2';
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
index 22bb6a8c4ba4..53a21feff3cf 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
@@ -1,10 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
-export default {
-  title: 'Core / ModuleMetadata / In stories',
-} as Meta;
-
 export const Individual1: StoryFn = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
@@ -43,3 +39,8 @@ export const Individual2: StoryFn = () => ({
 });
 
 Individual2.storyName = 'Individual 2';
+
+export default {
+  // title: 'Core / ModuleMetadata / In stories',
+  component: Individual1,
+} as Meta;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
index 81fe10181801..0a1c52eec84a 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
@@ -2,8 +2,21 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 import { CustomPipePipe } from './angular-src/custom.pipe';
 
+export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
+  template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
+  props: {
+    name: 'Prop Name',
+  },
+  moduleMetadata: {
+    declarations: [CustomPipePipe],
+    providers: [],
+  },
+});
+MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
+
 export default {
-  title: 'Core / ModuleMetadata / Merge default and story',
+  // title: 'Core / ModuleMetadata / Merge default and story',
+  component: MergeWithDefaultModuleMetadata,
   decorators: [
     moduleMetadata({
       declarations: [TokenComponent],
@@ -20,15 +33,3 @@ export default {
     }),
   ],
 } as Meta;
-
-export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
-  template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
-  props: {
-    name: 'Prop Name',
-  },
-  moduleMetadata: {
-    declarations: [CustomPipePipe],
-    providers: [],
-  },
-});
-MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
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 dfe3115f9951..8a79b7d95ebe 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
@@ -10,13 +10,13 @@ import { Component } from '@angular/core';
 class ComponentWithWhitespace {}
 
 export default {
-  title: 'Core / Parameters / With Bootstrap Options',
+  // title: 'Core / Parameters / With Bootstrap Options',
+  component: ComponentWithWhitespace,
   parameters: {
     bootstrapOptions: {
       preserveWhitespaces: true,
     },
   },
-  component: ComponentWithWhitespace,
 } as Meta;
 
 export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
diff --git a/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
index b5aa89a92779..c38a23d6c3a5 100644
--- a/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
+++ b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
@@ -1,15 +1,6 @@
 import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import Button from '../../button.component';
 
-export default {
-  title: 'Core / Story host styles',
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-    }),
-  ],
-} as Meta;
-
 export const TemplateStory: StoryFn = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
@@ -47,3 +38,13 @@ WithArgsStory.argTypes = {
 WithArgsStory.args = {
   text: 'Button with custom styles',
 };
+
+export default {
+  // title: 'Core / Story host styles',
+  component: TemplateStory,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+    }),
+  ],
+} as Meta;
diff --git a/code/frameworks/angular/template/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
index f1a838261aef..792f95a4a86b 100644
--- a/code/frameworks/angular/template/stories/legacy/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Legacy / Readme" />
+<Meta title="stories / frameworks / angular / legacy / README" />
 
 # Legacy examples
 
diff --git a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
index abea9a804956..58df68b46181 100644
--- a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
+++ b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
@@ -1,10 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/angular';
 import Button from '../button.component';
 
-export default {
-  title: 'Legacy / Component in Story',
-} as Meta;
-
 export const Basic: StoryFn = (args) => ({
   component: Button,
   props: args,
@@ -12,3 +8,8 @@ export const Basic: StoryFn = (args) => ({
 Basic.args = {
   text: 'Hello Button',
 };
+
+export default {
+  // title: 'Legacy / Component in Story',
+  component: Basic,
+} as Meta;
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 cf60b13e18fe..341107732a9c 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
@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
 import Button from '../../button.component';
 
 export default {
-  title: 'Others / Issues / 12009 unknown component',
+  // title: 'Others / Issues / 12009 unknown component',
   component: Button,
 } as Meta;
 
diff --git a/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
index 12abda943c4e..32d1cfcd3b7b 100644
--- a/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Others / ngx-translate / Readme" />
+<Meta title="stories / frameworks / angular / others / ngx-translate" />
 
 # [ngx-translate](https://github.com/ngx-translate/core)
 

From 2529fa7ef72fa86f4b0901ee7d07d3568f903cf5 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 7 Oct 2022 16:32:43 +1100
Subject: [PATCH 4/5] Move angular docs stories to framework

---
 .../doc-button/doc-button.component.html      |   7 +
 .../doc-button/doc-button.component.scss      |   3 +
 .../doc-button/doc-button.component.ts        | 233 ++++++++++++++++++
 .../argTypes/doc-button/doc-button.stories.ts |  24 ++
 .../doc-directive/doc-directive.directive.ts  |  25 ++
 .../doc-directive/doc-directive.stories.ts    |  14 ++
 .../doc-injectable/doc-injectable.service.ts  |  27 ++
 .../doc-injectable/doc-injectable.stories.ts  |  17 ++
 .../argTypes/doc-pipe/doc-pipe.pipe.ts        |  18 ++
 .../argTypes/doc-pipe/doc-pipe.stories.ts     |  17 ++
 10 files changed, 385 insertions(+)
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts

diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
new file mode 100644
index 000000000000..7af61d6f344d
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
@@ -0,0 +1,7 @@
+<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
+  <img
+    width="100"
+    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+  />
+  {{ label }}
+</button>
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
new file mode 100644
index 000000000000..52c3e2bf0e20
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
@@ -0,0 +1,3 @@
+.btn-primary {
+  background-color: #ff9899;
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
new file mode 100644
index 000000000000..51d8ba0c8d29
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
@@ -0,0 +1,233 @@
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+@Component({
+  selector: 'my-button',
+  templateUrl: './doc-button.component.html',
+  styleUrls: ['./doc-button.component.scss'],
+})
+export class DocButtonComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef!: ElementRef;
+
+  /** Test default value. */
+  @Input()
+  public theDefaultValue = 'Default value in component';
+
+  /**
+   * Setting default value here because compodoc won't get the default value for accessors
+   * @default Another default value
+   * */
+  @Input()
+  get anotherDefaultValue() {
+    return this._anotherDefaultValue;
+  }
+
+  set anotherDefaultValue(v: string) {
+    this._anotherDefaultValue = v;
+  }
+
+  _anotherDefaultValue = 'Another default value';
+
+  /** Test null default value. */
+  @Input()
+  public aNullValue = null;
+
+  /** Test null default value. */
+  @Input()
+  // @ts-expect-error intentionally undefined
+  public anUndefinedValue;
+
+  /** Test numeric default value. */
+  @Input()
+  public aNumericValue = 123;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent = ButtonAccent.Normal;
+
+  /** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
+  @Input() public someDataObject!: ISomeInterface;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label!: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if `isDisabled` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for `inputValue` that is also an `@Input`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for `inputValue`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event'])
+  onClickListener(event: Event) {
+    console.log('button', event.target);
+    this.handleClick(event);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => `btn-${_class}`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = `${value}`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds `x` and `y` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(`${y}`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some `id`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some `password`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey!: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem!: T[];
+}
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
new file mode 100644
index 000000000000..d23f3896359f
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
@@ -0,0 +1,24 @@
+import { Args } from '@storybook/angular';
+import { DocButtonComponent } from './doc-button.component';
+
+export default {
+  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 const WithTemplate = (args: Args) => ({
+  props: args,
+  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
+});
+WithTemplate.args = { label: 'Template test', appearance: 'primary' };
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
new file mode 100644
index 000000000000..bcb039c9d9f1
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
@@ -0,0 +1,25 @@
+/* eslint-disable no-useless-constructor */
+import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
+
+/**
+ * This is an Angular Directive
+ * example that has a Prop Table.
+ */
+@Directive({
+  selector: '[docDirective]',
+})
+export class DocDirective implements AfterViewInit {
+  constructor(private ref: ElementRef) {}
+
+  /**
+   * Will apply gray background color
+   * if set to true.
+   */
+  @Input() hasGrayBackground = false;
+
+  ngAfterViewInit(): void {
+    if (this.hasGrayBackground) {
+      this.ref.nativeElement.style = 'background-color: lightgray';
+    }
+  }
+}
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
new file mode 100644
index 000000000000..b734b93bf40d
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
@@ -0,0 +1,14 @@
+import { DocDirective } from './doc-directive.directive';
+
+export default {
+  component: DocDirective,
+};
+
+const modules = {
+  declarations: [DocDirective],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+});
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
new file mode 100644
index 000000000000..b6ad136fec33
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
+
+/**
+ * This is an Angular Injectable
+ * example that has a Prop Table.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DocInjectableService {
+  /**
+   * Auth headers to use.
+   */
+  auth: any;
+
+  constructor() {
+    this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
+  }
+
+  /**
+   * Get posts from Backend.
+   */
+  getPosts() {
+    return [];
+  }
+}
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
new file mode 100644
index 000000000000..d662a3de255f
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
@@ -0,0 +1,17 @@
+import { DocInjectableService } from './doc-injectable.service';
+
+export default {
+  component: DocInjectableService,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  provider: [DocInjectableService],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div><h1>DocInjectable</h1></div>',
+});
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
new file mode 100644
index 000000000000..6b7aca418a37
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * This is an Angular Pipe
+ * example that has a Prop Table.
+ */
+@Pipe({
+  name: 'docPipe',
+})
+export class DocPipe implements PipeTransform {
+  /**
+   * Transforms a string into uppercase.
+   * @param value string
+   */
+  transform(value: string): string {
+    return value?.toUpperCase();
+  }
+}
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
new file mode 100644
index 000000000000..ba6f0f282f63
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
@@ -0,0 +1,17 @@
+import { DocPipe } from './doc-pipe.pipe';
+
+export default {
+  component: DocPipe,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  declarations: [DocPipe],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+});

From 6343f99da87564302562ed4a9e26c5208702693b Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 7 Oct 2022 16:32:53 +1100
Subject: [PATCH 5/5] Remove snapshots

---
 .../custom-cva-component.stories.storyshot    |  15 --
 ...tiple-selector.component.stories.storyshot |  57 -----
 .../enums.component.stories.storyshot         |  35 ---
 .../inheritance.stories.storyshot             |  26 ---
 .../ng-content-about-parent.stories.storyshot |  74 ------
 .../ng-content-simple.stories.storyshot       |  42 ----
 .../__snapshots__/on-push.stories.storyshot   |  13 --
 .../custom-pipes.stories.storyshot            |  25 --
 .../di.component.stories.storyshot            |  59 -----
 .../styled.component.stories.storyshot        |  25 --
 ...ctor-ng-component-outlet.stories.storyshot |  23 --
 ...ctor-ng-factory-resolver.stories.storyshot |  17 --
 .../without-selector.stories.storyshot        |  27 ---
 .../import-module-for-root.stories.storyshot  | 113 ----------
 .../import-module.stories.storyshot           |  81 -------
 .../decorators.stories.storyshot              | 213 ------------------
 .../decorators.stories.storyshot              |  11 -
 .../in-export-default.stories.storyshot       |  47 ----
 .../in-stories.stories.storyshot              |  47 ----
 .../merge-default-and-story.stories.storyshot |  25 --
 .../all-parameters.stories.storyshot          |  34 ---
 .../bootstrap-options.stories.storyshot       |  13 --
 .../layout.parameters.stories.storyshot       |  67 ------
 .../story-styles.stories.storyshot            |  27 ---
 .../component-in-story.stories.storyshot      |  13 --
 .../12009-unknown-component.stories.storyshot |  13 --
 26 files changed, 1142 deletions(-)
 delete mode 100644 code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot

diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
deleted file mode 100644
index 5f4b1dfb13a1..000000000000
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Angular forms / ControlValueAccessor Simple input 1`] = `
-<storybook-wrapper>
-  <storybook-custom-cva-component>
-    <div>
-      
-    </div>
-    <input
-      class="ng-untouched ng-pristine ng-valid"
-      type="text"
-    />
-  </storybook-custom-cva-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
deleted file mode 100644
index 460e52d629cb..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
-<storybook-wrapper>
-  <storybook-attribute-selector
-    foo="bar"
-  >
-    <h3>
-      Attribute selector
-    </h3>
-     Selector: storybook-attribute-selector[foo="bar"] 
-    <br />
-     Generated template: &lt;storybook-attribute-selector foo="bar"&gt;&lt;/storybook-attribute-selector&gt;
-  </storybook-attribute-selector>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
-<storybook-wrapper>
-  <storybook-class-selector
-    class="foo"
-  >
-    <h3>
-      Class selector
-    </h3>
-     Selector: storybook-class-selector.foo,storybook-class-selector.bar 
-    <br />
-     Generated template: &lt;storybook-class-selector class="foo"&gt;&lt;/storybook-class-selector&gt;
-  </storybook-class-selector>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors multiple class selectors 1`] = `
-<storybook-wrapper>
-  <storybook-button>
-    <h3>
-      Multiple selector
-    </h3>
-     Selector: storybook-button,button[foo],[foo].button,button[baz] 
-    <br />
-     Generated template: &lt;storybook-button&gt;&lt;/storybook-button&gt;
-  </storybook-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
-<storybook-wrapper>
-  <storybook-multiple-selector>
-    <h3>
-      Multiple selector
-    </h3>
-     Selector: storybook-button,button[foo],[foo].button,button[baz] 
-    <br />
-     Generated template: &lt;storybook-multiple-selector&gt;&lt;/storybook-multiple-selector&gt;
-  </storybook-multiple-selector>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
deleted file mode 100644
index aaf435fc730a..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Enum Types Basic 1`] = `
-<storybook-wrapper>
-  <app-enums
-    ng-reflect-aliased-union-type="Type Alias 1"
-    ng-reflect-enum-alias="0"
-    ng-reflect-enum-numeric="0"
-    ng-reflect-enum-numeric-initial="1"
-    ng-reflect-enum-strings="PRIMARY"
-    ng-reflect-union-type="union a"
-  >
-    <div>
-      <div>
-        unionType: union a
-      </div>
-      <div>
-        aliasedUnionType: Type Alias 1
-      </div>
-      <div>
-        enumNumeric: 0
-      </div>
-      <div>
-        enumNumericInitial: 1
-      </div>
-      <div>
-        enumStrings: PRIMARY
-      </div>
-      <div>
-        enumAlias: 0
-      </div>
-    </div>
-  </app-enums>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
deleted file mode 100644
index 599db9b491d9..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Inheritance base button 1`] = `
-<storybook-wrapper>
-  <storybook-base-button
-    ng-reflect-label="this is label"
-  >
-    <button>
-      this is label
-    </button>
-  </storybook-base-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Inheritance icon button 1`] = `
-<storybook-wrapper>
-  <storybook-icon-button
-    ng-reflect-icon="this is icon"
-    ng-reflect-label="this is label"
-  >
-    <button>
-      this is label - this is icon
-    </button>
-  </storybook-icon-button>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
deleted file mode 100644
index a8422882a1a4..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents Always Define Template Or Component 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-button>
-        <button
-          style="background-color: rgb(94, 173, 245);"
-        />
-      </sb-button>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents Empty Button 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button />
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents In <h1> 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <h1>
-        My button in h1
-      </h1>
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-emoji>
-        👾
-      </sb-emoji>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component And Args 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-emoji
-        ng-reflect-emoji="🌵"
-      >
-        🌵
-      </sb-emoji>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Dynamic Content And Args 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      My button text
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
deleted file mode 100644
index 9ff0be60731d..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With ng-content / Simple Default 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    >
-      <h1>
-        This is rendered in ng-content
-      </h1>
-    </div>
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Simple Only Component 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    />
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Simple With Dynamic Content And Args 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    >
-      <h1>
-        Default content
-      </h1>
-    </div>
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
deleted file mode 100644
index f33448f92bba..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With OnPush strategy Class-specified component with OnPush and Args 1`] = `
-<storybook-wrapper>
-  <storybook-on-push-box
-    ng-reflect-bg-color="#FFF000"
-    ng-reflect-word="The text"
-    style="background-color: rgb(255, 240, 0);"
-  >
-     Word of the day: The text 
-  </storybook-on-push-box>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
deleted file mode 100644
index 086157037ecb..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Pipes Simple 1`] = `
-<storybook-wrapper>
-  <storybook-with-pipe
-    ng-reflect-field="foobar"
-  >
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-with-pipe>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Pipes With args 1`] = `
-<storybook-wrapper>
-  <storybook-with-pipe
-    ng-reflect-field="Foo Bar"
-  >
-    <h1>
-      CustomPipe: Foo Bar
-    </h1>
-  </storybook-with-pipe>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
deleted file mode 100644
index d9fb54b3c1b2..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies 1`] = `
-<storybook-wrapper>
-  <storybook-di-component
-    ng-reflect-title="Component dependencies"
-  >
-    <div>
-      <div>
-        All dependencies are defined: true
-      </div>
-      <div>
-        Title: Component dependencies
-      </div>
-      <div>
-        Injector: function NodeInjector(_tNode, _lView) {
-              this._tNode = _tNode;
-              this._lView = _lView;
-          }
-      </div>
-      <div>
-        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
-      </div>
-      <div>
-        TestToken: 123
-      </div>
-    </div>
-  </storybook-di-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies with args 1`] = `
-<storybook-wrapper>
-  <storybook-di-component
-    ng-reflect-title="Component dependencies"
-  >
-    <div>
-      <div>
-        All dependencies are defined: true
-      </div>
-      <div>
-        Title: Component dependencies
-      </div>
-      <div>
-        Injector: function NodeInjector(_tNode, _lView) {
-              this._tNode = _tNode;
-              this._lView = _lView;
-          }
-      </div>
-      <div>
-        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
-      </div>
-      <div>
-        TestToken: 123
-      </div>
-    </div>
-  </storybook-di-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
deleted file mode 100644
index 67afa3fec1e5..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With StyleUrls Component with styles 1`] = `
-<storybook-wrapper>
-  <storybook-styled-component>
-    <div>
-      <p
-        class="red-color"
-      >
-        Styled with scoped CSS
-      </p>
-      <p
-        class="blue-color"
-      >
-        Styled with scoped SCSS
-      </p>
-      <p
-        class="green-color"
-      >
-        Styled with global CSS
-      </p>
-    </div>
-  </storybook-styled-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
deleted file mode 100644
index 0d6bcc532750..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgComponentOutlet Custom wrapper *NgComponentOutlet 1`] = `
-<storybook-wrapper>
-  <ng-component-outlet-wrapper
-    ng-reflect-color="green"
-    ng-reflect-component-outlet="function WithoutSelectorCompon"
-    ng-reflect-name="Dixie Normous"
-  >
-    <ng-component>
-      My name in color : 
-      <div
-        style="color: green;"
-      >
-        Dixie Normous
-      </div>
-      Ng-content : Inspired by 
-      https://angular.io/api/common/NgComponentOutlet
-    </ng-component>
-    
-  </ng-component-outlet-wrapper>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
deleted file mode 100644
index 9bd911768d2c..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector / Custom wrapper ComponentFactoryResolver Custom wrapper ComponentFactoryResolver 1`] = `
-<storybook-wrapper>
-  <component-factory-wrapper
-    ng-reflect-args="[object Object]"
-    ng-reflect-component-outlet="function WithoutSelectorCompon"
-  /><ng-component>
-    My name in color : 
-    <div
-      style="color: chartreuse;"
-    >
-      Dixie Normous
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
deleted file mode 100644
index cc9d114e8379..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector Simple Component 1`] = `
-<storybook-wrapper>
-  <ng-component>
-    My name in color : 
-    <div
-      style="color: rgb(30, 136, 229);"
-    >
-      Joe Bar
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / without selector With Injection Token And Args 1`] = `
-<storybook-wrapper>
-  <ng-component>
-    My name in color : 
-    <div
-      style="color: red;"
-    >
-      Dixie Normous
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
deleted file mode 100644
index f5c1fe6d1c73..000000000000
--- a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
+++ /dev/null
@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: rgb(255, 84, 84);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: rgb(255, 84, 84);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overridden provider 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: yellow;"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: yellow;"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
deleted file mode 100644
index b6daa0d1f2e1..000000000000
--- a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / NgModule / Module with multiple component Chip 1`] = `
-<storybook-wrapper>
-  <storybook-chip
-    ng-reflect-display-text="Chip"
-    style="background-color: rgb(238, 238, 238);"
-  >
-    <span
-      class="text"
-    >
-      Chíp
-    </span>
-    <div
-      class="remove"
-    >
-      <span
-        class="x"
-      >
-        ✕
-      </span>
-    </div>
-  </storybook-chip>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / NgModule / Module with multiple component Chips Group 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: rgb(238, 238, 238);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: rgb(238, 238, 238);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
deleted file mode 100644
index bdee6db3222c..000000000000
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
+++ /dev/null
@@ -1,213 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Custom Decorator 
-    <div
-      style="margin: 3em;"
-    >
-      Child Template
-    </div>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <child-component
-      ng-reflect-child-text="Child text"
-    >
-       Child
-      <br />
-       Input text: Child text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-       Private text: Child private text 
-      <br />
-    </child-component>
-    
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component>
-       Parent
-      <br />
-       Input text:  
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component>
-       Parent
-      <br />
-       Input text:  
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component
-      ng-reflect-parent-text="Parent text"
-    >
-       Parent
-      <br />
-       Input text: Parent text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Custom Decorator 
-    <div
-      style="margin: 3em;"
-    >
-      Child Template
-    </div>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <child-component
-      ng-reflect-child-text="Child text"
-    >
-       Child
-      <br />
-       Input text: Child text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-       Private text: Child private text 
-      <br />
-    </child-component>
-    
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Child Template
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
deleted file mode 100644
index 26b6592642cc..000000000000
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Decorators / Theme Decorators Base 1`] = `
-<storybook-wrapper>
-  <div
-    class="light-theme"
-  >
-    Change theme with the brush in toolbar
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
deleted file mode 100644
index bbc4164fcb97..000000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 1 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="Prop Name"
-  >
-    <h3>
-      Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 2 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component>
-    <h3>
-      Provider Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
deleted file mode 100644
index dd3a8cbb8707..000000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="Prop Name"
-  >
-    <h3>
-      Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component>
-    <h3>
-      Provider Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Jim
-      </li>
-      <li>
-        Jill
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
deleted file mode 100644
index 7c2c8fb716c5..000000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with default ModuleMetadata 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="CustomPipe: Prop Name"
-  >
-    <h3>
-      CustomPipe: Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
deleted file mode 100644
index 9798cec48521..000000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Parameters are {
-    \\"docs\\": {
-   "
-  >
-    <button>
-      Parameters are {
-    "docs": {
-      "inlineStories": true
-    },
-    "options": {
-      "storySort": {
-        "order": [
-          "Welcome",
-          "Core ",
-          "Addons ",
-          "Basics "
-        ]
-      }
-    },
-    "framework": "angular",
-    "globalParameter": "globalParameter",
-    "chapterParameter": "chapterParameter",
-    "storyParameter": "storyParameter",
-    "__isArgsStory": true
-  }
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
deleted file mode 100644
index 0930ead62cd4..000000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = `
-<storybook-wrapper>
-  <component-with-whitespace>
-    <div>
-      <p>
-        Some content
-      </p>
-    </div>
-  </component-with-whitespace>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
deleted file mode 100644
index dff97a49d792..000000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
+++ /dev/null
@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Default 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
-<storybook-wrapper>
-  <div
-    style="background-color: yellow;"
-  >
-    <storybook-button-component
-      ng-reflect-text="Button"
-      text="Button"
-    >
-      <button>
-        Button
-      </button>
-    </storybook-button-component>
-
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout None 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
deleted file mode 100644
index ca04c343df5d..000000000000
--- a/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Story host styles With Args 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _ngcontent-a-c160=""
-    ng-reflect-text="Button with custom styles"
-  >
-    <button>
-      Button with custom styles
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Story host styles With story template 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _ngcontent-a-c159=""
-    ng-reflect-text="Button with custom styles"
-  >
-    <button>
-      Button with custom styles
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
deleted file mode 100644
index e04f37811e12..000000000000
--- a/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Legacy / Component in Story Basic 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Hello Button"
-  >
-    <button>
-      Hello Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
deleted file mode 100644
index 71e6830d78c9..000000000000
--- a/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Unknown component"
-  >
-    <button>
-      Unknown component
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;