Boost up your

component

development

mitko@dev-thought.cool

@MTschimev

Mitko Tschimev

What is slowing us down?

Component complexity

State reproduction

Rebuild and bootstrap time

Develop components in an isolated way

Step really fast through Scenarios

LIGHTWEIGHT

Scenario Driven Development

How to setup

ng add angular-playground

npm run playground

open http://localhost:4201

Sandbox

// ng generate angular-playground:sandbox cat

import { sandboxOf } from 'angular-playground';
import { CatComponent } from './cat.component';

export default sandboxOf(CatComponent, {
    imports: [
        // my sandbox modules
        MatButtonModule,
        ...
    ]
})
  .add('default', {
    template: `<app-cat>Hey Kitty!</app-cat>`
  })
  .add('with name', {
    template: `<app-cat name="Daria">Hey Kitty!</app-cat>`
  })
  .add('with gender', {
    template: `<app-cat [gender]="gender">Hey Kitty!</app-cat>`,
    context: {
        gender: 'female'
    }
  })