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:
Minimum Requirements
Angular 6.0.0
Typescript 2.7.0
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:
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:
