Comment on page
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/
- 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"
},
...
}
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:/*************************************************************************
*
* 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;}']
});
Before run the playground, you should compile your project.
Run the next npm command in the
package.json root: npm run playground