How to test your component in the playground

Angular Playground is an open source tool to run isolated instances of the components in development that allows to each component take different behaviors, for example a component could be rendered with different style configurations depending of model values. For more information about Angular Playground please visit: http://www.angularplayground.it/

Minimum Requirements

1. Angular 6.0.0

2. Typescript 2.7.0

3. Angular CLI 6.0.0

Also you need to check if you have the angular-playground package in the package.json. you can install the package with:

npm install --save-dev angular-playground

Create a file in src called main.playground.ts like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { PlaygroundModule } from 'angular-playground';

PlaygroundModule
  .configure({
      selector: 'app-root',
      overlay: false,
      modules: []
  });

platformBrowserDynamic().bootstrapModule(PlaygroundModule)
.catch(err => console.log(err));

Add a new file in same path of the package.json called angular-playground.json:

{
  "sourceRoot": "./src",
  "angularCli": {
    "appName": "playground"
  }
}

you need to add the project in the angular.json with this configuration:

{
  . . .

  "projects": {

    . . .

    "playground": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/playground",
            "index": "src/index.html",
            "main": "src/main.playground.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "playground:build"
          }
        }
      }
    }


  },

   . . .
}

Finally, update the package.json with the new script:

{ 
  "name": "my-awesome-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "playground": "angular-playground"
  },
  ...
}

Create a new component sandbox

To create a new isolated component instance in the Angular Playground you should create a sandbox folder inside the component folder declaration, then you have to create a file with the same name of the component file but ending with .sandbox.tsprefix. After that you can create the sandbox definition as it is shown in the following code sample:

File: label.component.sandbox.ts

/*************************************************************************
*
* MOBILIZE CONFIDENTIAL
* _______________________________________________________________________
*
*  Mobilize Company
*  All Rights Reserved.
*
* NOTICE: All helper classes are provided for customer use only;
* all other use is prohibited without prior written consent from Mobilize.Net.
* no warranty express or implied;
* use at own risk.
**************************************************************************/
import { SandboxBuilder, sandboxOf } from 'angular-playground';
import { LabelComponent } from '../label.component';

const sandboxConfig = {
    imports: [ ],
    label: 'Label Component'
  };

export default sandboxOf(LabelComponent)
  .add('Simple label', {
    template: '<wm-label [model]="model" class="label1"></wm-label>',
    context: {
        model: { Text: 'Label Component' }
    },
    styles: ['/deep/ .label1{position: absolute; top: 100px; left: 50%; color:blue}']
  })
  .add('Label with &', {
    template: '<wm-label [model]="model" class="label1"></wm-label>',
    context: {
        model: { Text: '&Label Ampersand Co&mponent' }
    },
    styles: ['/deep/ .label1{position: absolute; top: 100px; left: 50%; color:blue; border: 1px solid blue;}']
  });

Run the playground

Before run the playground, you should compile your project.

Run the next npm command in the package.json root:

  npm run playground

Then you can open your browser on http://localhost:4201