From 24b98d9fc451b6eae4138ee4c443b8b91533a04c Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 11:08:55 +1100
Subject: [PATCH 01/15] Adds requiresComponentDeclaration option

---
 .../src/frameworks/angular/helpers.ts         | 21 +++++++++++++++---
 .../src/frameworks/angular/types.ts           |  1 +
 app/angular/index.d.ts                        |  1 +
 .../src/client/preview/angular/helpers.ts     | 22 ++++++++++++++++---
 .../src/client/preview/angular/types.ts       |  1 +
 5 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
index d8786390a4cd..ad2ff8aa5e2f 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
@@ -34,9 +34,24 @@ const createComponentFromTemplate = (template: string) => {
 };
 
 export const initModuleData = (storyObj: NgStory): any => {
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    moduleMetadata = {},
+    requiresComponentDeclaration: componentRequiresDeclaration = true,
+  } = storyObj;
+
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template)
+    : component;
 
-  const AnnotatedComponent = template ? createComponentFromTemplate(template) : component;
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || componentRequiresDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
@@ -44,7 +59,7 @@ export const initModuleData = (storyObj: NgStory): any => {
   };
 
   const moduleMeta = getModuleMeta(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/types.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/types.ts
index 3582cb89f8a3..36793bf7fb76 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/types.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/types.ts
@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;
diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts
index 5fb420e543f0..3b2e9d078db9 100644
--- a/app/angular/index.d.ts
+++ b/app/angular/index.d.ts
@@ -22,6 +22,7 @@ export interface IStory {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
+  requiresComponentDeclaration?: boolean;
   template?: string;
 }
 
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
index d85fa451edff..63bcff52dd0e 100644
--- a/app/angular/src/client/preview/angular/helpers.ts
+++ b/app/angular/src/client/preview/angular/helpers.ts
@@ -47,9 +47,25 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
 
 const initModule = (storyFn: IStoryFn) => {
   const storyObj = storyFn();
-  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    styles,
+    moduleMetadata = {},
+    requiresComponentDeclaration: componentRequiresDeclaration = true,
+  } = storyObj;
+
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template, styles)
+    : component;
 
-  let AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || componentRequiresDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
@@ -57,7 +73,7 @@ const initModule = (storyFn: IStoryFn) => {
   };
 
   return getModule(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,
diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts
index 0633eabea0ea..408911dcbf0a 100644
--- a/app/angular/src/client/preview/angular/types.ts
+++ b/app/angular/src/client/preview/angular/types.ts
@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

From 4cfd34d58627c9e1876d0b5a0172ec49d0859e01 Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 11:57:23 +1100
Subject: [PATCH 02/15] Creates stories

---
 .../stories/module-context/chip.component.ts  | 15 ++++++++++++
 .../module-context/chips-group.component.ts   | 23 +++++++++++++++++++
 .../stories/module-context/chips.module.ts    | 12 ++++++++++
 .../module-context/module-context.stories.ts  | 22 ++++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 examples/angular-cli/src/stories/module-context/chip.component.ts
 create mode 100644 examples/angular-cli/src/stories/module-context/chips-group.component.ts
 create mode 100644 examples/angular-cli/src/stories/module-context/chips.module.ts
 create mode 100644 examples/angular-cli/src/stories/module-context/module-context.stories.ts

diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
new file mode 100644
index 000000000000..132d1d24ed27
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-chip',
+  template: `
+    <span>{{ text }}</span>
+    <span (click)="removeClicked.emit()">X</span>
+  `,
+  styles: [``],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChipComponent {
+  @Input() text: string;
+  @Output() removeClicked = new EventEmitter();
+}
diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
new file mode 100644
index 000000000000..b131e4b3bc3b
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-chips-group',
+  template: `
+    <storybook-chip
+      *ngFor="let chip of chips"
+      [text]="chip.text"
+      (removeClicked)="removeAllChipsClick.emit(chip.id)"
+    ></storybook-chip>
+    <span (click)="removeAllChipsClick.emit()">Remove All</span>
+  `,
+  styles: [``],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChipsGroupComponent {
+  @Input() chips: Array<{
+    id: number;
+    text: string;
+  }>;
+  @Output() removeChipClick = new EventEmitter<number>();
+  @Output() removeAllChipsClick = new EventEmitter();
+}
diff --git a/examples/angular-cli/src/stories/module-context/chips.module.ts b/examples/angular-cli/src/stories/module-context/chips.module.ts
new file mode 100644
index 000000000000..f398fe216212
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/chips.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChipComponent } from './chip.component';
+import { ChipsGroupComponent } from './chips-group.component';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ChipsGroupComponent],
+  declarations: [ChipsGroupComponent, ChipComponent],
+  providers: [],
+})
+export class ChipsModule {}
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
new file mode 100644
index 000000000000..1c2a8e3614df
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -0,0 +1,22 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { ChipsGroupComponent } from './chips-group.component';
+import { ChipsModule } from './chips.module';
+
+storiesOf('Custom|Module Context', module)
+  .addDecorator(
+    moduleMetadata({
+      imports: [ChipsModule],
+    })
+  )
+  .add('to Storybook', () => ({
+    component: ChipsGroupComponent,
+    requiresComponentDeclaration: false,
+    props: {
+      chips: [
+        {
+          id: 1,
+          text: 'Chip 1',
+        },
+      ],
+    },
+  }));

From 14f6080a30f76bbb0c04b0798a64eb057cf00e13 Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 13:32:52 +1100
Subject: [PATCH 03/15] Remove property alias

---
 .../storyshots-core/src/frameworks/angular/helpers.ts         | 4 ++--
 app/angular/src/client/preview/angular/helpers.ts             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
index ad2ff8aa5e2f..3fb7131edd85 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
@@ -39,7 +39,7 @@ export const initModuleData = (storyObj: NgStory): any => {
     template,
     props,
     moduleMetadata = {},
-    requiresComponentDeclaration: componentRequiresDeclaration = true,
+    requiresComponentDeclaration = true,
   } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
@@ -49,7 +49,7 @@ export const initModuleData = (storyObj: NgStory): any => {
     : component;
 
   const componentDeclarations =
-    isCreatingComponentFromTemplate || componentRequiresDeclaration
+    isCreatingComponentFromTemplate || requiresComponentDeclaration
       ? [AppComponent, AnnotatedComponent]
       : [AppComponent];
 
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
index 63bcff52dd0e..64648081301b 100644
--- a/app/angular/src/client/preview/angular/helpers.ts
+++ b/app/angular/src/client/preview/angular/helpers.ts
@@ -53,7 +53,7 @@ const initModule = (storyFn: IStoryFn) => {
     props,
     styles,
     moduleMetadata = {},
-    requiresComponentDeclaration: componentRequiresDeclaration = true,
+    requiresComponentDeclaration = true,
   } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
@@ -63,7 +63,7 @@ const initModule = (storyFn: IStoryFn) => {
     : component;
 
   const componentDeclarations =
-    isCreatingComponentFromTemplate || componentRequiresDeclaration
+    isCreatingComponentFromTemplate || requiresComponentDeclaration
       ? [AppComponent, AnnotatedComponent]
       : [AppComponent];
 

From 9012830ff33f7909652db28de8325818702691d7 Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 15:39:34 +1100
Subject: [PATCH 04/15] Adds styles to example stories component

---
 .../stories/module-context/chip.component.ts  | 45 +++++++++++++++++--
 .../module-context/chips-group.component.ts   | 29 +++++++++++-
 .../module-context/module-context.stories.ts  |  4 ++
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index 132d1d24ed27..7eb6d31177f0 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -3,10 +3,49 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
 @Component({
   selector: 'storybook-chip',
   template: `
-    <span>{{ text }}</span>
-    <span (click)="removeClicked.emit()">X</span>
+    <span class="text">{{ text }}</span>
+    <div class="remove" (click)="removeClicked.emit()">
+      <span class="x">✕</span>
+    </div>
   `,
-  styles: [``],
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        cursor: default;
+        align-items: center;
+        justify-content: center;
+        padding: 0.2rem 0.5rem;
+        border-radius: 1rem;
+        background-color: white;
+        border: solid 0.1rem transparent;
+      }
+      :host:hover {
+        border-color: black;
+      }
+      .text {
+        font-family: inherit;
+      }
+      .remove {
+        margin-left: 1rem;
+        background-color: lightgrey;
+        border-radius: 50%;
+        width: 1rem;
+        height: 1rem;
+        text-align: center;
+      }
+      .remove:hover {
+        background-color: palevioletred;
+      }
+      .x {
+        display: inline-block;
+        color: white;
+        text-align: center;
+        vertical-align: baseline;
+        line-height: 1rem;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipComponent {
diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
index b131e4b3bc3b..9c991ddd9c8d 100644
--- a/examples/angular-cli/src/stories/module-context/chips-group.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -5,12 +5,37 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
   template: `
     <storybook-chip
       *ngFor="let chip of chips"
+      class="chip"
       [text]="chip.text"
       (removeClicked)="removeAllChipsClick.emit(chip.id)"
     ></storybook-chip>
-    <span (click)="removeAllChipsClick.emit()">Remove All</span>
+    <div *ngIf="chips.length > 1" class="remove-all" (click)="removeAllChipsClick.emit()">
+      Remove All
+    </div>
   `,
-  styles: [``],
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-content: center;
+        padding: 0.5rem;
+        background-color: lightgrey;
+        border-radius: 0.5rem;
+        width: fit-content;
+      }
+      .chip:not(:first-of-type) {
+        margin-left: 0.5rem;
+      }
+      .remove-all {
+        margin-left: 0.5rem;
+        padding: 0.2rem 0.5rem;
+        border: solid 0.1rem white;
+      }
+      .remove-all:hover {
+        background-color: palevioletred;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsGroupComponent {
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 1c2a8e3614df..b53f9d909057 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -17,6 +17,10 @@ storiesOf('Custom|Module Context', module)
           id: 1,
           text: 'Chip 1',
         },
+        {
+          id: 2,
+          text: 'Chip 2',
+        },
       ],
     },
   }));

From b6cd1f556b8aa4c4b7452200c3eb270da0367e2c Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 16:05:34 +1100
Subject: [PATCH 05/15] Adds child component

---
 .../src/stories/module-context/chip.component.ts       |  4 ++--
 .../stories/module-context/chips-group.component.ts    |  2 +-
 .../stories/module-context/module-context.stories.ts   | 10 +++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index 7eb6d31177f0..c61e271d3b89 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -17,7 +17,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
         justify-content: center;
         padding: 0.2rem 0.5rem;
         border-radius: 1rem;
-        background-color: white;
+        background-color: #eeeeee;
         border: solid 0.1rem transparent;
       }
       :host:hover {
@@ -39,7 +39,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
       }
       .x {
         display: inline-block;
-        color: white;
+        color: #eeeeee;
         text-align: center;
         vertical-align: baseline;
         line-height: 1rem;
diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
index 9c991ddd9c8d..9dfc22e24fb1 100644
--- a/examples/angular-cli/src/stories/module-context/chips-group.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -29,7 +29,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
       .remove-all {
         margin-left: 0.5rem;
         padding: 0.2rem 0.5rem;
-        border: solid 0.1rem white;
+        border: solid 0.1rem #eeeeee;
       }
       .remove-all:hover {
         background-color: palevioletred;
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index b53f9d909057..5c81c2483d27 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -1,6 +1,7 @@
 import { storiesOf, moduleMetadata } from '@storybook/angular';
 import { ChipsGroupComponent } from './chips-group.component';
 import { ChipsModule } from './chips.module';
+import { ChipComponent } from './chip.component';
 
 storiesOf('Custom|Module Context', module)
   .addDecorator(
@@ -8,7 +9,7 @@ storiesOf('Custom|Module Context', module)
       imports: [ChipsModule],
     })
   )
-  .add('to Storybook', () => ({
+  .add('Component with self and child component declared in its feature module', () => ({
     component: ChipsGroupComponent,
     requiresComponentDeclaration: false,
     props: {
@@ -23,4 +24,11 @@ storiesOf('Custom|Module Context', module)
         },
       ],
     },
+  }))
+  .add('Child component', () => ({
+    component: ChipComponent,
+    requiresComponentDeclaration: false,
+    props: {
+      text: 'My Chip',
+    },
   }));

From 71732da2618c9bac4418f375f87a2679b8ed86e9 Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 17:34:30 +1100
Subject: [PATCH 06/15] Use knowbs; Remove OnPush because it doesn't seem to
 work with knobs

---
 .../stories/module-context/chip.component.ts  |  5 +--
 .../module-context/chips-group.component.ts   |  3 +-
 .../module-context/module-context.stories.ts  | 39 ++++++++++++-------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index c61e271d3b89..8de0ae324931 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
 @Component({
   selector: 'storybook-chip',
   template: `
-    <span class="text">{{ text }}</span>
+    <span class="text">{{ displayText }}</span>
     <div class="remove" (click)="removeClicked.emit()">
       <span class="x">✕</span>
     </div>
@@ -46,9 +46,8 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipComponent {
-  @Input() text: string;
+  @Input() displayText: string;
   @Output() removeClicked = new EventEmitter();
 }
diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
index 9dfc22e24fb1..a25b9d681acb 100644
--- a/examples/angular-cli/src/stories/module-context/chips-group.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -6,7 +6,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
     <storybook-chip
       *ngFor="let chip of chips"
       class="chip"
-      [text]="chip.text"
+      [displayText]="chip.text"
       (removeClicked)="removeAllChipsClick.emit(chip.id)"
     ></storybook-chip>
     <div *ngIf="chips.length > 1" class="remove-all" (click)="removeAllChipsClick.emit()">
@@ -36,7 +36,6 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsGroupComponent {
   @Input() chips: Array<{
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 5c81c2483d27..19e419e29bac 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -1,19 +1,20 @@
 import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { withKnobs, text, object } from '@storybook/addon-knobs';
 import { ChipsGroupComponent } from './chips-group.component';
+
 import { ChipsModule } from './chips.module';
 import { ChipComponent } from './chip.component';
 
 storiesOf('Custom|Module Context', module)
+  .addDecorator(withKnobs)
   .addDecorator(
     moduleMetadata({
       imports: [ChipsModule],
     })
   )
-  .add('Component with self and child component declared in its feature module', () => ({
-    component: ChipsGroupComponent,
-    requiresComponentDeclaration: false,
-    props: {
-      chips: [
+  .add('Component with self and child component declared in its feature module', () => {
+    const props: { [K in keyof ChipsGroupComponent]?: any } = {
+      chips: object('Chips', [
         {
           id: 1,
           text: 'Chip 1',
@@ -22,13 +23,21 @@ storiesOf('Custom|Module Context', module)
           id: 2,
           text: 'Chip 2',
         },
-      ],
-    },
-  }))
-  .add('Child component', () => ({
-    component: ChipComponent,
-    requiresComponentDeclaration: false,
-    props: {
-      text: 'My Chip',
-    },
-  }));
+      ]),
+    };
+    return {
+      component: ChipsGroupComponent,
+      requiresComponentDeclaration: false,
+      props,
+    };
+  })
+  .add('Child component', () => {
+    const props: { [K in keyof ChipComponent]?: any } = {
+      displayText: text('displayText', 'My Chip'),
+    };
+    return {
+      component: ChipComponent,
+      requiresComponentDeclaration: false,
+      props,
+    };
+  });

From 53ccc0139d2ccaed272c00704fa7694966f9bc75 Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Fri, 29 Mar 2019 18:08:06 +1100
Subject: [PATCH 07/15] Add note

---
 .../module-context/module-context.stories.ts  | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 19e419e29bac..0c9b42e9886f 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -12,25 +12,45 @@ storiesOf('Custom|Module Context', module)
       imports: [ChipsModule],
     })
   )
-  .add('Component with self and child component declared in its feature module', () => {
-    const props: { [K in keyof ChipsGroupComponent]?: any } = {
-      chips: object('Chips', [
-        {
-          id: 1,
-          text: 'Chip 1',
-        },
-        {
-          id: 2,
-          text: 'Chip 2',
-        },
-      ]),
-    };
-    return {
-      component: ChipsGroupComponent,
-      requiresComponentDeclaration: false,
-      props,
-    };
-  })
+  .add(
+    'Component with self and child component declared in its feature module',
+    () => {
+      const props: { [K in keyof ChipsGroupComponent]?: any } = {
+        chips: object('Chips', [
+          {
+            id: 1,
+            text: 'Chip 1',
+          },
+          {
+            id: 2,
+            text: 'Chip 2',
+          },
+        ]),
+      };
+      return {
+        component: ChipsGroupComponent,
+        requiresComponentDeclaration: false,
+        props,
+      };
+    },
+    {
+      notes: `
+        Typically, when developing features in Angular, it is advantageous to use "feature modules"
+        which provide a "context" for declared components including required imports, declarations,
+        and providers.
+
+        To simulate this context in Storybook, we may want to use the component delcared in this
+        context, rather than having to recreate this context using just to get the component to
+        perform its basic functionality.
+
+        However, as the default behavior of Storkybook for Angular is to delcare specified components
+        in a dynamic module, which prevents us from using the version of the component declared in our
+        feature module (with its appropriate context).
+
+        To prevent this dynamic declaration, set the "requiresComponentDeclaration" flag to false.
+      `,
+    }
+  )
   .add('Child component', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
       displayText: text('displayText', 'My Chip'),

From cdc516127334cd8de5bde3e4e0d5c0545615627d Mon Sep 17 00:00:00 2001
From: Max <maximsagan@gmail.com>
Date: Sat, 30 Mar 2019 02:57:56 +1100
Subject: [PATCH 08/15] Adds pipe

---
 .../stories/module-context/chip-text.pipe.ts  | 29 +++++++++++++++++++
 .../stories/module-context/chip.component.ts  |  2 +-
 .../stories/module-context/chips.module.ts    |  3 +-
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 examples/angular-cli/src/stories/module-context/chip-text.pipe.ts

diff --git a/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts b/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts
new file mode 100644
index 000000000000..68e23182385d
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts
@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'chipText',
+})
+export class ChipTextPipe implements PipeTransform {
+  transform(value: string): string {
+    return Array.from(value)
+      .map(char => this.accentVowel(char))
+      .join('');
+  }
+
+  accentVowel(char: string): string {
+    switch (char) {
+      case 'a':
+        return 'á';
+      case 'e':
+        return 'é';
+      case 'i':
+        return 'í';
+      case 'o':
+        return 'ó';
+      case 'u':
+        return 'ú';
+      default:
+        return char;
+    }
+  }
+}
diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index 8de0ae324931..57d780f0f5ff 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
 @Component({
   selector: 'storybook-chip',
   template: `
-    <span class="text">{{ displayText }}</span>
+    <span class="text">{{ displayText | chipText }}</span>
     <div class="remove" (click)="removeClicked.emit()">
       <span class="x">✕</span>
     </div>
diff --git a/examples/angular-cli/src/stories/module-context/chips.module.ts b/examples/angular-cli/src/stories/module-context/chips.module.ts
index f398fe216212..1c41e53aa450 100644
--- a/examples/angular-cli/src/stories/module-context/chips.module.ts
+++ b/examples/angular-cli/src/stories/module-context/chips.module.ts
@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ChipComponent } from './chip.component';
 import { ChipsGroupComponent } from './chips-group.component';
+import { ChipTextPipe } from './chip-text.pipe';
 
 @NgModule({
   imports: [CommonModule],
   exports: [ChipsGroupComponent],
-  declarations: [ChipsGroupComponent, ChipComponent],
+  declarations: [ChipsGroupComponent, ChipComponent, ChipTextPipe],
   providers: [],
 })
 export class ChipsModule {}

From 08c2c7ee3d4cdc6aeffbc9e9feaf6410cb641c5d Mon Sep 17 00:00:00 2001
From: Max <maximsagan@gmail.com>
Date: Sat, 30 Mar 2019 10:39:20 +1100
Subject: [PATCH 09/15] Adds provider

---
 .../module-context/chip-color.token.ts        |  3 +++
 .../stories/module-context/chip.component.ts  | 17 ++++++++++++--
 .../stories/module-context/chips.module.ts    |  8 ++++++-
 .../module-context/module-context.stories.ts  | 23 +++++++++++++++++--
 4 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 examples/angular-cli/src/stories/module-context/chip-color.token.ts

diff --git a/examples/angular-cli/src/stories/module-context/chip-color.token.ts b/examples/angular-cli/src/stories/module-context/chip-color.token.ts
new file mode 100644
index 000000000000..5d0a1991490b
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/chip-color.token.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const CHIP_COLOR = new InjectionToken<string>('chip-color');
diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index 57d780f0f5ff..71be719090c9 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -1,4 +1,13 @@
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  Output,
+  EventEmitter,
+  Inject,
+  HostBinding,
+} from '@angular/core';
+import { CHIP_COLOR } from './chip-color.token';
 
 @Component({
   selector: 'storybook-chip',
@@ -17,7 +26,6 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
         justify-content: center;
         padding: 0.2rem 0.5rem;
         border-radius: 1rem;
-        background-color: #eeeeee;
         border: solid 0.1rem transparent;
       }
       :host:hover {
@@ -50,4 +58,9 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
 export class ChipComponent {
   @Input() displayText: string;
   @Output() removeClicked = new EventEmitter();
+  @HostBinding('style.background-color') backgroundColor: string;
+
+  constructor(@Inject(CHIP_COLOR) chipColor: string) {
+    this.backgroundColor = chipColor;
+  }
 }
diff --git a/examples/angular-cli/src/stories/module-context/chips.module.ts b/examples/angular-cli/src/stories/module-context/chips.module.ts
index 1c41e53aa450..606a96797665 100644
--- a/examples/angular-cli/src/stories/module-context/chips.module.ts
+++ b/examples/angular-cli/src/stories/module-context/chips.module.ts
@@ -3,11 +3,17 @@ import { CommonModule } from '@angular/common';
 import { ChipComponent } from './chip.component';
 import { ChipsGroupComponent } from './chips-group.component';
 import { ChipTextPipe } from './chip-text.pipe';
+import { CHIP_COLOR } from './chip-color.token';
 
 @NgModule({
   imports: [CommonModule],
   exports: [ChipsGroupComponent],
   declarations: [ChipsGroupComponent, ChipComponent, ChipTextPipe],
-  providers: [],
+  providers: [
+    {
+      provide: CHIP_COLOR,
+      useValue: '#eeeeee',
+    },
+  ],
 })
 export class ChipsModule {}
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 0c9b42e9886f..8e33bca9e085 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -4,6 +4,7 @@ import { ChipsGroupComponent } from './chips-group.component';
 
 import { ChipsModule } from './chips.module';
 import { ChipComponent } from './chip.component';
+import { CHIP_COLOR } from './chip-color.token';
 
 storiesOf('Custom|Module Context', module)
   .addDecorator(withKnobs)
@@ -51,13 +52,31 @@ storiesOf('Custom|Module Context', module)
       `,
     }
   )
-  .add('Child component', () => {
+  .add('Component with default providers', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
-      displayText: text('displayText', 'My Chip'),
+      displayText: text('Display Text', 'My Chip'),
     };
     return {
       component: ChipComponent,
       requiresComponentDeclaration: false,
       props,
     };
+  })
+  .add('Component with overridden provider', () => {
+    const props: { [K in keyof ChipComponent]?: any } = {
+      displayText: text('Display Text', 'My Chip'),
+    };
+    return {
+      component: ChipComponent,
+      moduleMetadata: {
+        providers: [
+          {
+            provide: CHIP_COLOR,
+            useValue: 'yellow',
+          },
+        ],
+      },
+      requiresComponentDeclaration: false,
+      props,
+    };
   });

From 5e6f2c723c202db658e09baba1060c9888130f42 Mon Sep 17 00:00:00 2001
From: Max <maximsagan@gmail.com>
Date: Sat, 30 Mar 2019 10:49:19 +1100
Subject: [PATCH 10/15] Simplifies description

---
 .../module-context/module-context.stories.ts    | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 8e33bca9e085..fa3449232160 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -36,20 +36,11 @@ storiesOf('Custom|Module Context', module)
     },
     {
       notes: `
-        Typically, when developing features in Angular, it is advantageous to use "feature modules"
-        which provide a "context" for declared components including required imports, declarations,
-        and providers.
+        This component includes a child component, a pipe, and a default provider, all which come from 
+        the specified feature module.
 
-        To simulate this context in Storybook, we may want to use the component delcared in this
-        context, rather than having to recreate this context using just to get the component to
-        perform its basic functionality.
-
-        However, as the default behavior of Storkybook for Angular is to delcare specified components
-        in a dynamic module, which prevents us from using the version of the component declared in our
-        feature module (with its appropriate context).
-
-        To prevent this dynamic declaration, set the "requiresComponentDeclaration" flag to false.
-      `,
+        This behavior is possible by setting the "requiresComponentDeclaration" flag to false.
+      `.replace(/ {1,}/g, ' '),
     }
   )
   .add('Component with default providers', () => {

From eb9cc71914426a8bef633d7da633c41b07294e8c Mon Sep 17 00:00:00 2001
From: Max <maximsagan@gmail.com>
Date: Sat, 30 Mar 2019 11:01:27 +1100
Subject: [PATCH 11/15] Adds actions

---
 .../src/stories/module-context/chips-group.component.ts  | 2 +-
 .../src/stories/module-context/module-context.stories.ts | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
index a25b9d681acb..d911185387ab 100644
--- a/examples/angular-cli/src/stories/module-context/chips-group.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -7,7 +7,7 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
       *ngFor="let chip of chips"
       class="chip"
       [displayText]="chip.text"
-      (removeClicked)="removeAllChipsClick.emit(chip.id)"
+      (removeClicked)="removeChipClick.emit(chip.id)"
     ></storybook-chip>
     <div *ngIf="chips.length > 1" class="remove-all" (click)="removeAllChipsClick.emit()">
       Remove All
diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index fa3449232160..151e9d647b65 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -1,8 +1,9 @@
 import { storiesOf, moduleMetadata } from '@storybook/angular';
 import { withKnobs, text, object } from '@storybook/addon-knobs';
-import { ChipsGroupComponent } from './chips-group.component';
+import { action } from '@storybook/addon-actions';
 
 import { ChipsModule } from './chips.module';
+import { ChipsGroupComponent } from './chips-group.component';
 import { ChipComponent } from './chip.component';
 import { CHIP_COLOR } from './chip-color.token';
 
@@ -14,7 +15,7 @@ storiesOf('Custom|Module Context', module)
     })
   )
   .add(
-    'Component with self and child component declared in its feature module',
+    'Component with self and dependencies declared in its feature module',
     () => {
       const props: { [K in keyof ChipsGroupComponent]?: any } = {
         chips: object('Chips', [
@@ -27,6 +28,8 @@ storiesOf('Custom|Module Context', module)
             text: 'Chip 2',
           },
         ]),
+        removeChipClick: action('Remove chip'),
+        removeAllChipsClick: action('Remove all chips clicked'),
       };
       return {
         component: ChipsGroupComponent,
@@ -46,6 +49,7 @@ storiesOf('Custom|Module Context', module)
   .add('Component with default providers', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
       displayText: text('Display Text', 'My Chip'),
+      removeClicked: action('Remove icon clicked'),
     };
     return {
       component: ChipComponent,
@@ -56,6 +60,7 @@ storiesOf('Custom|Module Context', module)
   .add('Component with overridden provider', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
       displayText: text('Display Text', 'My Chip'),
+      removeClicked: action('Remove icon clicked'),
     };
     return {
       component: ChipComponent,

From 12c33990ad35f182bd4e9862d389cf3a1d66a1dc Mon Sep 17 00:00:00 2001
From: Max <maximsagan@gmail.com>
Date: Sat, 30 Mar 2019 11:03:38 +1100
Subject: [PATCH 12/15] Rename story

---
 .../src/stories/module-context/module-context.stories.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/angular-cli/src/stories/module-context/module-context.stories.ts b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
index 151e9d647b65..e3dd4fbf15c8 100644
--- a/examples/angular-cli/src/stories/module-context/module-context.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context.stories.ts
@@ -7,7 +7,7 @@ import { ChipsGroupComponent } from './chips-group.component';
 import { ChipComponent } from './chip.component';
 import { CHIP_COLOR } from './chip-color.token';
 
-storiesOf('Custom|Module Context', module)
+storiesOf('Custom|Feature Module as Context', module)
   .addDecorator(withKnobs)
   .addDecorator(
     moduleMetadata({

From 68cecfceceb7d504fa65d3adfe6414024ab8c54f Mon Sep 17 00:00:00 2001
From: Max Sagan <maxim.sagan@winning.com.au>
Date: Tue, 2 Apr 2019 15:18:23 +1100
Subject: [PATCH 13/15] Adds snapshots

---
 .../module-context.stories.storyshot          | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot

diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
new file mode 100644
index 000000000000..3dce9caca121
--- /dev/null
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Feature Module as Context Component with default providers 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chip
+    _nghost-c15=""
+    style="background-color: rgb(238, 238, 238);"
+  >
+    <span
+      _ngcontent-c15=""
+      class="text"
+    >
+      My Chíp
+    </span>
+    <div
+      _ngcontent-c15=""
+      class="remove"
+    >
+      <span
+        _ngcontent-c15=""
+        class="x"
+      >
+        ✕
+      </span>
+    </div>
+  </storybook-chip>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Feature Module as Context Component with overridden provider 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chip
+    _nghost-c16=""
+    style="background-color: yellow;"
+  >
+    <span
+      _ngcontent-c16=""
+      class="text"
+    >
+      My Chíp
+    </span>
+    <div
+      _ngcontent-c16=""
+      class="remove"
+    >
+      <span
+        _ngcontent-c16=""
+        class="x"
+      >
+        ✕
+      </span>
+    </div>
+  </storybook-chip>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Feature Module as Context Component with self and dependencies declared in its feature module 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chips-group
+    _nghost-c13=""
+  >
+    
+    <storybook-chip
+      _ngcontent-c13=""
+      _nghost-c14=""
+      class="chip"
+      ng-reflect-display-text="Chip 1"
+      style="background-color: rgb(238, 238, 238);"
+    >
+      <span
+        _ngcontent-c14=""
+        class="text"
+      >
+        Chíp 1
+      </span>
+      <div
+        _ngcontent-c14=""
+        class="remove"
+      >
+        <span
+          _ngcontent-c14=""
+          class="x"
+        >
+          ✕
+        </span>
+      </div>
+    </storybook-chip>
+    <storybook-chip
+      _ngcontent-c13=""
+      _nghost-c14=""
+      class="chip"
+      ng-reflect-display-text="Chip 2"
+      style="background-color: rgb(238, 238, 238);"
+    >
+      <span
+        _ngcontent-c14=""
+        class="text"
+      >
+        Chíp 2
+      </span>
+      <div
+        _ngcontent-c14=""
+        class="remove"
+      >
+        <span
+          _ngcontent-c14=""
+          class="x"
+        >
+          ✕
+        </span>
+      </div>
+    </storybook-chip>
+    
+    <div
+      _ngcontent-c13=""
+      class="remove-all"
+    >
+       Remove All 
+    </div>
+  </storybook-chips-group>
+</storybook-dynamic-app-root>
+`;

From d8da7a218dce4f52a277fe4cdc15b175982bcbed Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 26 Apr 2019 18:52:11 +0200
Subject: [PATCH 14/15] FIX linting

---
 .../src/stories/module-context/chip.component.ts            | 2 ++
 .../src/stories/module-context/chips-group.component.ts     | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/chip.component.ts b/examples/angular-cli/src/stories/module-context/chip.component.ts
index 71be719090c9..cb73f323e643 100644
--- a/examples/angular-cli/src/stories/module-context/chip.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chip.component.ts
@@ -57,7 +57,9 @@ import { CHIP_COLOR } from './chip-color.token';
 })
 export class ChipComponent {
   @Input() displayText: string;
+
   @Output() removeClicked = new EventEmitter();
+
   @HostBinding('style.background-color') backgroundColor: string;
 
   constructor(@Inject(CHIP_COLOR) chipColor: string) {
diff --git a/examples/angular-cli/src/stories/module-context/chips-group.component.ts b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
index d911185387ab..0015fd32cd8c 100644
--- a/examples/angular-cli/src/stories/module-context/chips-group.component.ts
+++ b/examples/angular-cli/src/stories/module-context/chips-group.component.ts
@@ -38,10 +38,12 @@ import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from
   ],
 })
 export class ChipsGroupComponent {
-  @Input() chips: Array<{
+  @Input() chips: {
     id: number;
     text: string;
-  }>;
+  }[];
+
   @Output() removeChipClick = new EventEmitter<number>();
+
   @Output() removeAllChipsClick = new EventEmitter();
 }

From 27e30e52ceaad0497df95d9a36e16b690457bb2b Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 26 Apr 2019 18:55:19 +0200
Subject: [PATCH 15/15] FIX snapshots

---
 .../module-context.stories.storyshot          | 40 +++++++++----------
 .../__snapshots__/on-push.stories.storyshot   |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
index 3dce9caca121..a7645463e23a 100644
--- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
@@ -7,21 +7,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with default prov
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-c15=""
+    _nghost-a-c15=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-c15=""
+      _ngcontent-a-c15=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-c15=""
+      _ngcontent-a-c15=""
       class="remove"
     >
       <span
-        _ngcontent-c15=""
+        _ngcontent-a-c15=""
         class="x"
       >
         ✕
@@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with overridden p
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-c16=""
+    _nghost-a-c16=""
     style="background-color: yellow;"
   >
     <span
-      _ngcontent-c16=""
+      _ngcontent-a-c16=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-c16=""
+      _ngcontent-a-c16=""
       class="remove"
     >
       <span
-        _ngcontent-c16=""
+        _ngcontent-a-c16=""
         class="x"
       >
         ✕
@@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
   target={[Function ViewContainerRef_]}
 >
   <storybook-chips-group
-    _nghost-c13=""
+    _nghost-a-c13=""
   >
     
     <storybook-chip
-      _ngcontent-c13=""
-      _nghost-c14=""
+      _ngcontent-a-c13=""
+      _nghost-a-c14=""
       class="chip"
       ng-reflect-display-text="Chip 1"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-c14=""
+        _ngcontent-a-c14=""
         class="text"
       >
         Chíp 1
       </span>
       <div
-        _ngcontent-c14=""
+        _ngcontent-a-c14=""
         class="remove"
       >
         <span
-          _ngcontent-c14=""
+          _ngcontent-a-c14=""
           class="x"
         >
           ✕
@@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
       </div>
     </storybook-chip>
     <storybook-chip
-      _ngcontent-c13=""
-      _nghost-c14=""
+      _ngcontent-a-c13=""
+      _nghost-a-c14=""
       class="chip"
       ng-reflect-display-text="Chip 2"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-c14=""
+        _ngcontent-a-c14=""
         class="text"
       >
         Chíp 2
       </span>
       <div
-        _ngcontent-c14=""
+        _ngcontent-a-c14=""
         class="remove"
       >
         <span
-          _ngcontent-c14=""
+          _ngcontent-a-c14=""
           class="x"
         >
           ✕
@@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
     </storybook-chip>
     
     <div
-      _ngcontent-c13=""
+      _ngcontent-a-c13=""
       class="remove-all"
     >
        Remove All 
diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
index 1458c361f366..3fe8857f4718 100644
--- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
+++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Core|OnPush Class-specified component with OnPush and Knobs
   target={[Function ViewContainerRef_]}
 >
   <storybook-on-push-box
-    _nghost-a-c13=""
+    _nghost-a-c17=""
     style="background-color: rgb(255, 240, 0);"
   >
      Word of the day: OnPush