> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/how-to-test-your-component-in-the-playground.md).

# 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:

```typescript
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**:

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

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

```javascript
{
  . . .

  "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:

```javascript
{ 
  "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.ts`prefix. After that you can create the sandbox definition as it is shown in the following code sample:

### File: label.component.sandbox.ts

```typescript
/*************************************************************************
*
* 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>