diff --git a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
index 60036a0b5b8..13b8459513f 100644
--- a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
@@ -3,47 +3,47 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
   <storybook-welcome-component
-    _nghost-a-c24=""
+    _nghost-a-c25=""
   >
     <main
-      _ngcontent-a-c24=""
+      _ngcontent-a-c25=""
     >
       <h1
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
         Welcome to storybook
       </h1>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
         This is a UI component dev environment for your app.
       </p>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
          We've added some basic stories inside the 
         <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           class="inline-code"
         >
           src/stories
         </span>
          directory. 
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          A story is a single state of one or more UI components. You can have as many stories as you want. 
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          (Basically a story is like a visual test case.) 
       </p>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
          See these sample 
         <a
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           role="button"
           tabindex="0"
         >
@@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         </a>
          for a component called 
         <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           class="inline-code"
         >
           Button
@@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          . 
       </p>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
          Just like that, you can add your own components as stories. 
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          You can also edit those components and see changes right away. 
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          (Try editing the 
         <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           class="inline-code"
         >
           Button
         </span>
          stories located at 
         <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           class="inline-code"
         >
           src/stories/index.js
@@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         .) 
       </p>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
       >
          Usually we create stories with smaller UI components in the app.
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          Have a look at the 
         <a
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           href="https://storybook.js.org/basics/writing-stories"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          section in our documentation. 
       </p>
       <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
         class="note"
       >
         <b
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         >
           NOTE:
         </b>
         <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
         />
          Have a look at the 
         <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
           class="inline-code"
         >
           .storybook/webpack.config.js
diff --git a/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
index 145350c9823..ce3a20fae52 100644
--- a/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
@@ -1,30 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons/Actions Action and method 1`] = `
+exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c3=""
-    ng-reflect-text="Action and Method"
+    _nghost-a-c4=""
+    ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c4=""
     >
-      Action and Method
+      Button 🥁
     </button>
   </storybook-button-component>
 </storybook-wrapper>
 `;
 
-exports[`Storyshots Addons/Actions Action only 1`] = `
+exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
 <storybook-wrapper>
   <storybook-button-component
     _nghost-a-c2=""
-    ng-reflect-text="Action only"
+    ng-reflect-text="Button 🥁"
   >
     <button
       _ngcontent-a-c2=""
     >
-      Action only
+      Button 🥁
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Addons/Actions Story with template 1`] = `
+<storybook-wrapper>
+  <button>
+    Button
+  </button>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Addons/Actions Use action in method 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c3=""
+    ng-reflect-text="Button 🥁"
+  >
+    <button
+      _ngcontent-a-c3=""
+    >
+      Button 🥁
     </button>
   </storybook-button-component>
 </storybook-wrapper>
diff --git a/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts b/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts
index 2e5fe20fbe4..a18426f42ad 100644
--- a/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts
+++ b/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts
@@ -1,29 +1,46 @@
 import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 
 export default {
   component: Button,
   title: 'Addons/Actions',
-};
+} as Meta;
 
-export const ActionOnly = () => ({
+export const ComponentOutputWithEventEmitter: Story = () => ({
   props: {
-    text: 'Action only',
-    onClick: action('log 1'),
+    text: 'Button 🥁',
+    onClick: action('On click'),
   },
 });
+ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter';
 
-ActionOnly.storyName = 'Action only';
-
-export const ActionAndMethod = () => ({
+export const UseActionInMethod: Story = () => ({
   props: {
-    text: 'Action and Method',
+    text: 'Button 🥁',
     onClick: (e) => {
       console.log(e);
       e.preventDefault();
-      action('log2')(e.target);
+      action('Action name')(e.target, 'Another arg');
     },
   },
 });
+UseActionInMethod.storyName = 'Use action in method';
 
-ActionAndMethod.storyName = 'Action and method';
+export const StoryTemplate: Story = () => ({
+  template: `<button (click)="onClick($event)" (mouseover)="onOver()">Button</button>`,
+  props: {
+    onClick: action('On click'),
+    onOver: action('On over'),
+  },
+});
+StoryTemplate.storyName = 'Story with template';
+
+export const ComponentOutputWithArgsTypes: Story = (args) => ({
+  props: {
+    text: 'Button 🥁',
+    ...args,
+  },
+});
+ComponentOutputWithArgsTypes.storyName = 'Component Output with ArgsTypes';
+ComponentOutputWithArgsTypes.argTypes = { onClick: { action: 'On click' } };
diff --git a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
index 960c472a84a..0eb2c97c69e 100644
--- a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c7=""
     ng-reflect-text="This one should have different"
   >
     <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c7=""
     >
       This one should have different backgrounds
     </button>
@@ -16,21 +16,6 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 `;
 
 exports[`Storyshots Addons / Backgrounds With Component 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c4=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c4=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons / Backgrounds With Template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
     _nghost-a-c5=""
@@ -44,3 +29,18 @@ exports[`Storyshots Addons / Backgrounds With Template 1`] = `
   </storybook-button-component>
 </storybook-wrapper>
 `;
+
+exports[`Storyshots Addons / Backgrounds With Template 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c6=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c6=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
index ed423cfe192..70939d88e5a 100644
--- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c9=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c9=""
     >
       😀 😎 👍 💯
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
 exports[`Storyshots Addons/Docs with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c8=""
     ng-reflect-text="Hello Button"
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c8=""
     >
       Hello Button
     </button>
diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
index 151d5b1761e..2648e92aa89 100644
--- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c11=""
     ng-reflect-text="Hello 👋"
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c11=""
     >
       Hello 👋
     </button>
diff --git a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
index f7aab466694..55864ff9b1a 100644
--- a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c10=""
     ng-reflect-text="Add 👾"
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c10=""
     >
       Add 👾
     </button>
diff --git a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
index 99045970e0e..29703076aaf 100644
--- a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Links button with link to another story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c11=""
+    _nghost-a-c12=""
     ng-reflect-text="Go to Welcome Story"
   >
     <button
-      _ngcontent-a-c11=""
+      _ngcontent-a-c12=""
     >
       Go to Welcome Story
     </button>
diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
index c03f44bc288..69a63403adc 100644
--- a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
@@ -3,13 +3,13 @@
 exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c12=""
+    _nghost-a-c13=""
     ng-reflect-text="Parameters are {
     \\"docs\\": {
    "
   >
     <button
-      _ngcontent-a-c12=""
+      _ngcontent-a-c13=""
     >
       Parameters are {
     "docs": {
diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
index b8286ce406c..1cbb51b7d9d 100644
--- a/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
@@ -1,71 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c15=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c15=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Default 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c13=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c13=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
-<storybook-wrapper>
-  <div
-    style="background-color: yellow;"
-  >
-    <storybook-button-component
-      _nghost-a-c14=""
-      ng-reflect-text="Button"
-      text="Button"
-    >
-      <button
-        _ngcontent-a-c14=""
-      >
-        Button
-      </button>
-    </storybook-button-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout None 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c17=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c17=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
 <storybook-wrapper>
   <storybook-button-component
     _nghost-a-c16=""
@@ -79,3 +14,68 @@ exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
   </storybook-button-component>
 </storybook-wrapper>
 `;
+
+exports[`Storyshots Core / Parameters / Layout Default 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c14=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c14=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
+<storybook-wrapper>
+  <div
+    style="background-color: yellow;"
+  >
+    <storybook-button-component
+      _nghost-a-c15=""
+      ng-reflect-text="Button"
+      text="Button"
+    >
+      <button
+        _ngcontent-a-c15=""
+      >
+        Button
+      </button>
+    </storybook-button-component>
+  </div>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout None 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c18=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c18=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c17=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c17=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
diff --git a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
index 9a121899764..a0f9fd28caf 100644
--- a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
@@ -3,12 +3,12 @@
 exports[`Storyshots Core / Story host styles With Knobs 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c20=""
-    _nghost-a-c21=""
+    _ngcontent-a-c21=""
+    _nghost-a-c22=""
     ng-reflect-text="Button with custom styles"
   >
     <button
-      _ngcontent-a-c21=""
+      _ngcontent-a-c22=""
     >
       Button with custom styles
     </button>
@@ -19,12 +19,12 @@ exports[`Storyshots Core / Story host styles With Knobs 1`] = `
 exports[`Storyshots Core / Story host styles With story template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c18=""
-    _nghost-a-c19=""
+    _ngcontent-a-c19=""
+    _nghost-a-c20=""
     ng-reflect-text="Button with custom styles"
   >
     <button
-      _ngcontent-a-c19=""
+      _ngcontent-a-c20=""
     >
       Button with custom styles
     </button>
diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
index 8ad7e4ab935..dc24c553667 100644
--- a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
+++ b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Legacy / Component in Story Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c22=""
+    _nghost-a-c23=""
     ng-reflect-text="Hello Button"
   >
     <button
-      _ngcontent-a-c22=""
+      _ngcontent-a-c23=""
     >
       Hello Button
     </button>
diff --git a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
index e44f5c97824..25f4de0b77c 100644
--- a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c23=""
+    _nghost-a-c24=""
     ng-reflect-text="Unknown component"
   >
     <button
-      _ngcontent-a-c23=""
+      _ngcontent-a-c24=""
     >
       Unknown component
     </button>