diff --git a/packages/angular-playground/package-lock.json b/packages/angular-playground/package-lock.json
index 83f61d26..3c9a0488 100644
--- a/packages/angular-playground/package-lock.json
+++ b/packages/angular-playground/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@angular-devkit/core": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.1.tgz",
-      "integrity": "sha512-m+j1d+oMZRu0jUN7UyE4C8Kh8YoY9TP6ltjcrO2SzE89mzHg+apY1taf4EzOYKrrCZxw7Q4viPa8EXeF2AJ1cQ==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-2fKNmv4sJ6EEONp6QJ2VcHlR0O2TAXWm6jQsWxJjfVvROhAY7eJkzhqi0pUoWhUiamxCk5ssl8p9KkhtOiTa4Q==",
       "requires": {
         "ajv": "~6.4.0",
         "chokidar": "^2.0.3",
@@ -317,11 +317,11 @@
       }
     },
     "@angular-devkit/schematics": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.7.1.tgz",
-      "integrity": "sha512-8G223dq6RgV1tvp3od6mn5TX3VH57OWCN+v6pz4o27pDOQUhxX94VeuetOrhe2oYu4nmcs8epCateG4CJF7phg==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.7.3.tgz",
+      "integrity": "sha512-OqZ9qzxDxEqAxV8n4uoq8IeSU+a2GN82z2N3a7z5nNxV6zfJo6K/33SLDuagGFSZfOUuP+35qaR+rHzSzByRig==",
       "requires": {
-        "@angular-devkit/core": "0.7.1",
+        "@angular-devkit/core": "0.7.3",
         "rxjs": "^6.0.0"
       }
     },
@@ -420,13 +420,13 @@
       }
     },
     "@schematics/angular": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.7.1.tgz",
-      "integrity": "sha512-wvP1ofwKVIbu3UCCsLTxdNZ7D0iVl0njoHvFEiMAQEVO+1VnhY3y+xpvnujhmU0pdYfIv17mc/hRNwEH6gQwkQ==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.7.3.tgz",
+      "integrity": "sha512-L5n9QGWho/SdNAZjw1im3bfNWdkLAJTW0sye9i3rCHM4oyZ59N+LASCN5LvjrhSjKP8LVqmJm/yArUExzpOaiQ==",
       "requires": {
-        "@angular-devkit/core": "0.7.1",
-        "@angular-devkit/schematics": "0.7.1",
-        "typescript": ">=2.6.2 <2.8"
+        "@angular-devkit/core": "0.7.3",
+        "@angular-devkit/schematics": "0.7.3",
+        "typescript": ">=2.6.2 <2.10"
       }
     },
     "@types/events": {
diff --git a/packages/angular-playground/package.json b/packages/angular-playground/package.json
index 11401705..232c3da1 100644
--- a/packages/angular-playground/package.json
+++ b/packages/angular-playground/package.json
@@ -58,9 +58,9 @@
     "zone.js": ">=0.8.26"
   },
   "dependencies": {
-    "@angular-devkit/core": "^0.7.1",
-    "@angular-devkit/schematics": "^0.7.1",
-    "@schematics/angular": "^0.7.1",
+    "@angular-devkit/core": "^0.7.3",
+    "@angular-devkit/schematics": "^0.7.3",
+    "@schematics/angular": "^0.7.3",
     "async": "^2.6.0",
     "chalk": "^2.4.1",
     "commander": "^2.15.1",
diff --git a/packages/angular-playground/schematics/src/collection.json b/packages/angular-playground/schematics/src/collection.json
index a9c91851..921bd00d 100644
--- a/packages/angular-playground/schematics/src/collection.json
+++ b/packages/angular-playground/schematics/src/collection.json
@@ -1,6 +1,11 @@
 {
   "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
+    "sandbox": {
+      "description": "Creates a sandbox file for component in given path",
+      "factory": "./sandbox",
+      "schema": "./sandbox/schema.json"
+    },
     "ng-add": {
       "description": "Adds Angular Playground to an application",
       "factory": "./ng-add"
diff --git a/packages/angular-playground/schematics/src/sandbox/files/__name@dasherize__.component.sandbox.ts b/packages/angular-playground/schematics/src/sandbox/files/__name@dasherize__.component.sandbox.ts
new file mode 100644
index 00000000..640f730c
--- /dev/null
+++ b/packages/angular-playground/schematics/src/sandbox/files/__name@dasherize__.component.sandbox.ts
@@ -0,0 +1,7 @@
+import { sandboxOf } from 'angular-playground';
+import { <%= classify(name) %>Component } from './<%= name %>.component';
+
+export default sandboxOf(<%= classify(name) %>Component)
+  .add('default', {
+    template: `<<%= selector %>></<%= selector %>>`
+  });
diff --git a/packages/angular-playground/schematics/src/sandbox/index.ts b/packages/angular-playground/schematics/src/sandbox/index.ts
new file mode 100644
index 00000000..674c8cdd
--- /dev/null
+++ b/packages/angular-playground/schematics/src/sandbox/index.ts
@@ -0,0 +1,48 @@
+import {
+  apply,
+  branchAndMerge,
+  chain,
+  mergeWith,
+  move,
+  Rule,
+  SchematicContext,
+  template,
+  Tree,
+  url
+} from '@angular-devkit/schematics';
+import { strings } from '@angular-devkit/core';
+import { getProject, getProjectPath } from '../utils/project';
+import { Schema } from './schema';
+import { parseName } from '@schematics/angular/utility/parse-name';
+
+export default function sandbox(options: Schema): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    if (options.path === undefined) {
+      options.path = getProjectPath(host, options);
+    }
+
+    const parsedPath = parseName(options.path, options.name);
+    options.name = parsedPath.name;
+    options.path = parsedPath.path;
+
+    const targetPath = options.flat
+      ? options.path
+      : `${options.path}/${options.name}`;
+
+    const prefix = getProject(host, {}).prefix;
+    const selector = `${prefix}-${options.name}`;
+
+    const templateSource = apply(url('./files'), [
+      template({
+        ...strings,
+        selector,
+        ...options,
+      }),
+      move(targetPath),
+    ]);
+
+    return chain([
+      branchAndMerge(mergeWith(templateSource))
+    ])(host, context);
+  }
+}
diff --git a/packages/angular-playground/schematics/src/sandbox/schema.json b/packages/angular-playground/schematics/src/sandbox/schema.json
new file mode 100644
index 00000000..f3ef82d2
--- /dev/null
+++ b/packages/angular-playground/schematics/src/sandbox/schema.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsPlaygroundSandbox",
+  "title": "Angular Playground's Sandbox",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the component to add the sandbox to.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the sandbox.",
+      "visible": false
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    }
+  },
+  "required": []
+}
diff --git a/packages/angular-playground/schematics/src/sandbox/schema.ts b/packages/angular-playground/schematics/src/sandbox/schema.ts
new file mode 100644
index 00000000..8ec79cf4
--- /dev/null
+++ b/packages/angular-playground/schematics/src/sandbox/schema.ts
@@ -0,0 +1,16 @@
+export interface Schema {
+  /**
+   * The name of the component.
+   */
+  name: string;
+
+  /**
+   * The path to create the sandbox.
+   */
+  path?: string;
+
+  /**
+   * Should the sandbox be created in the component's directory.
+   */
+  flat: boolean;
+}