by

Angular Playground

Hi Friends,

In this section, I will discuss more on angular playground, which is recently released. Generally, when we work on enterprise apps with many components, directives, pipes etc. Therefore, even for small change you need to load the whole app and do bunch of testing. And this becomes more frustrating when you need to do more iterative changes. For these cases, Angular playground has been introduced.

Solution:-

  • Scenario driven development
  • Sandbox individual components
  • Develop each component in isolation
  • Import other dependencies if needed
  • Mock all providers etc…

This also means it is going to have multiple benefits like

  • More focus on writing individual components
  • Faster development activity
  • View individual components from all possible states
  • and many others

Playground API.

Playground API looks pretty simple as shown below. There are two main configurations as shown below.

Sandbox config is file per component which you create. Therefore, for the sandbox config you will pass on type which is the component itself and then you are passing basic configuration to create a custom module inside the sandbox environment very much similar to unit tests. That way, we are only including pieces which components need to run.

And then, we have scenario config as well. API shown below.

Scenario is basically for each state of your component. It provides a template that includes them in the component, some context which is nothing but all javascript bindings, which you can use in the template. You can also provide any custom style or custom providers per scenario. Apart from these, there are certain other features which playground also supports like

  • Build system integration:- This will automatically check all your components in sandbox mode and incase of any error, it will alert.
  • Embed mode:- You can embed scenarios in Iframes as well.
  • Schematic support:- Now, it has become very easy to use playground with any angular project as it supports ng add and ng generate schematics.

Now, let us go ahead and add playground to my one of the existing projects. I chose https://github.com/rahulsahay19/ngMaterialCrud. If you just install and run the same, it should look like shown below.

 

For playground setup you can follow complete documentation @ https://angularplayground.it/docs/getting-started/installation. There are couple of options which you can utilize from here. I will be integrating with CLI itself.

First I will do ng add angular-playground.

Upon successful installation, multiple files get changed/added in your solution.

  • Added a main.playground.ts file to bootstrap the playground environment
  • Modified angular.json
  • Added an angular-playground.json file
  • Modified the tsconfig.app.json file
  • Add the following to the scripts section of package.json:
    "playground": "angular-playground"

 

Once this is done successfully, it will drop couple of files in your solution related to playground. Now, to run the same you need to do npm run playground.

Now, its listening on port 4201.

Now, here when you click on Click here link, it will take you to the steps of creating your first sandbox elements like shown below. This is the link https://angularplayground.it/docs/how-to/sandboxing-components.

Here I have both the options to create sandbox component either via CLI or manually directly creating inside the directory where component lives. Below, I have created sandbox component for notes component as shown below.

After that, I have created two scenarios for my component. 1st one is straight forward as it has only static content, hence its sandbox code looks like shown below

After that, I created one scenario where in data-bindings were involved like shown below.

Here, I passed in sandbox config exclusively. Likewise, if services are going to be involved, then we need to mock services as well like in unit test cases. Having said that, now let’s go ahead and run the playground with npm run playgound command. This will produce the below output.

Here, its listing two sandbox components. Here, when I do ctrl+p, it will list the components like

So, if I click on Home component, then it will produce the below output

Similarly for Registration component, it will be like

I hope, you would have liked this discussion around angular playground. Very interesting subject. In the next segment, we will discuss the same in depth with different scenarios. Till then stay tuned and happy coding.

Note:- In case, if you like this project as yeoman generator, then you can refer @ https://www.npmjs.com/package/generator-sample-crud-angular.

Thanks,
Rahul Sahay
Happy Coding