NG Playground enables developers to have a playground: easy setup to rapidly develop components/directives/pipes etc.
npm install --save-dev ng-playgroundng generate application playgroundIn the app.module.ts do as follows:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PlaygroundModule, PlaygroundComponent } from 'ng-playground';
import {
CaseAComponent,
CaseBComponent,
CaseCComponent
} from './cases';
import { CustomMenuAreaComponent } from './custom-menu-area/custom-menu-area.component';
@NgModule({
declarations: [
CaseAComponent,
CaseBComponent,
CaseCComponent,
CustomMenuAreaComponent
],
entryComponents: [
CaseAComponent,
CaseBComponent,
CaseCComponent,
CustomMenuAreaComponent
],
imports: [
BrowserModule,
PlaygroundModule.configure({
routes: [
{ title: 'Case A', component: CaseAComponent },
{ title: 'Parent', children: [ … ]},
{ title: 'Case C', component: CaseCComponent }
],
customMenuComponent: CustomMenuAreaComponent
})
],
bootstrap: [PlaygroundComponent]
})
export class AppModule { }In the index.html:
<body>
<pg-playground></pg-playground>
</body>In angular.json, add the styles:
"styles": [
"node_modules/ng-playground/ng-playground.css"
]