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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/how-to-test-your-component-in-the-playground.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.