diff --git a/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot b/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
new file mode 100644
index 000000000000..d3a6a62dc02a
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocInjectable Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <div>
+      <h1>
+        DocInjectable
+      </h1>
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts
new file mode 100644
index 000000000000..b6ad136fec33
--- /dev/null
+++ b/examples/angular-cli/src/stories/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/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts
new file mode 100644
index 000000000000..bb576e74f509
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts
@@ -0,0 +1,16 @@
+import { DocInjectableService } from './doc-injectable.service';
+
+export default {
+  title: 'DocInjectable',
+  component: DocInjectableService,
+  parameters: { docs: { iframeHeight: 120 } },
+};
+
+const modules = {
+  provider: [DocInjectableService],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div><h1>DocInjectable</h1></div>',
+});
diff --git a/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot b/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
new file mode 100644
index 000000000000..87c448fce67e
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocPipe Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <div>
+      <h1>
+        DOCPIPE
+      </h1>
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts
new file mode 100644
index 000000000000..6b7aca418a37
--- /dev/null
+++ b/examples/angular-cli/src/stories/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/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts
new file mode 100644
index 000000000000..55065c1688c7
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts
@@ -0,0 +1,16 @@
+import { DocPipe } from './doc-pipe.pipe';
+
+export default {
+  title: 'DocPipe',
+  component: DocPipe,
+  parameters: { docs: { iframeHeight: 120 } },
+};
+
+const modules = {
+  declarations: [DocPipe],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+});