How to use angular-playground - 10 common examples

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { PlaygroundModule } from 'angular-playground';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from './environments/environment';
import { enableProdMode } from '@angular/core';

enableProdMode();

PlaygroundModule
  .configure({
    selector: 'app-root',
    overlay: true,
    modules: [
      BrowserAnimationsModule,
      environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []
    ]
  });

platformBrowserDynamic().bootstrapModule(PlaygroundModule)
  .catch(err => console.error(err));

import { sandboxOf } from 'angular-playground';
import { PersonDetailsComponent } from './person-details.component';
import { PersonBioComponent } from './person-bio.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';

export default sandboxOf(PersonDetailsComponent, {
  label:'feature1',
  declarations: [PersonBioComponent],
  entryComponents: [PersonBioComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
  .add('person with name and twitter', {
    template: '',
    context: {
      person: {
        fullName: 'Tom Hardy',
        twitterHandle: 'mjones'
      }
    }
  })
  .add('person with name', {
    template: '',

import { sandboxOf } from 'angular-playground';
import { CounterService } from './counter.service';
import { NoticeComponent } from './notice.component';

class MockCounterService {
  increment() {
    return 100;
  }
}

export default sandboxOf(NoticeComponent, {providers: [CounterService], })
  .add('short text', {
    template: 'Notification'
  })
  .add('long text', {
    template: 'This is a really super long notice!'
  })
  .add('with emoji', {
    template: '👻'
  })
  .add('with custom provider', {
    template: 'Notice one hundred',
    providers: [{provide: CounterService, useClass: MockCounterService}]
  })
  .add('with inner html', {
    template: `<h1>A heading in a notice</h1>`
  })

import { sandboxOf } from 'angular-playground';
import { AnimatedComponent } from './animated.component';
export default sandboxOf(AnimatedComponent)
  .add('default', {
    template: ``
  });

import { sandboxOf } from 'angular-playground';
import { AboutComponent } from './about.component';

export default sandboxOf(AboutComponent)
  .add('About Component', {
    template: ``
  });

import { MockDataService, MockActivatedRoute, getActivatedRouteWithParent } from '../../shared/mocks';
import { ActivatedRoute } from '@angular/router';

const sandboxConfig = {
  imports: [ SharedModule, CoreModule ],
  providers: [
      { provide: DataService, useClass: MockDataService },
      { provide: ActivatedRoute, useFactory: () => {
        const route = getActivatedRouteWithParent([{ id: '1' }]);
        return route;
      }}
  ],
  label: 'Customer Details Component'
};

export default sandboxOf(CustomerDetailsComponent, sandboxConfig)
  .add('With a Customer', {
    template: ``
  })
  .add('Without a Customer', {
    template: ``,
    providers: [
      { provide: ActivatedRoute, useFactory: () => {
        const route = getActivatedRouteWithParent([{ id: null }]);
        return route;
      }}
    ]
  });

import {sandboxOf} from 'angular-playground';
import {PersonBioComponent} from './person-bio.component';
export default sandboxOf(PersonBioComponent, {label:'feature1'})
  .add('default', {template:``});

import {sandboxOf} from 'angular-playground';
import {PersonBioComponent} from './person-bio.component';
export default sandboxOf(PersonBioComponent, {label:'feature1'})
  .add('a special case', {template:`<h1>Special Bio</h1>`});

import { sandboxOf } from 'angular-playground';
import { InfoBlockComponent } from './info-block.component';

export default sandboxOf(InfoBlockComponent)
  .add('A general example', {
    template: `
      
        This is a general info block example component
        in Playground
      `
    })
  .add('A warning example', {
    template: `
      
        This is a "warning" info block example 
        component in Playground
      `
    })
  .add('An error example', {
    template: `

import { sandboxOf } from 'angular-playground';
import { SharedModule } from '../../shared/shared.module';
import { CustomersCardComponent } from './customers-card.component';
import { RouterTestingModule } from '@angular/router/testing';
import { CoreModule } from '../../core/core.module';
import { customers } from '../../shared/mocks';

const sandboxConfig = {
  imports: [ SharedModule, CoreModule, RouterTestingModule ],
  label: 'Customers Card Component'
};

export default sandboxOf(CustomersCardComponent, sandboxConfig)
  .add('With Many Customers', {
    template: ``,
    context: {
      customers: customers
    }
  })
  .add('With 10 Customers', {
    template: ``,
    context: {
      customers: customers.slice(0, 10)
    }
  })
  .add('With 4 Customers', {
    template: ``,
    context: {
      customers: customers.slice(0, 4)