When learning Angular or any other framework or we have an idea, we want to quickly create a proof of concept. One way is quickly to quickly go to a online editor, such stackblitz, codepen, and start coding a demo project, then show case to other people of your code. But the problem is that, we quickly forget about the url of the projects, the more we create and the more we forget. So I built a project to serve as container of all demo projects. Here is what you need to do if you want to create new demo.

  1. Create a component, name it as demo-[name], such as demo-hero. Put your demo code in the component.
  2. Register the component in the demo-list.ts, like below. That is it.
//demo-list.ts
import { DemoHelloComponent } from "./demo/demo-hello/demo-hello.component";
import { DemoByeComponent } from "./demo/demo-bye/demo-bye.component";
import { DemoHeroComponent } from "./demo/demo-hero/demo-hero.component";

export const demoList = {
  DemoHelloComponent,
  DemoByeComponent,
  DemoHeroComponent
};

Here it is preview of the project

Pretty simple, right? Here is how I do that.

  • Step 1 Create the DemoService(demo.service.ts) which list all the component you want to demo.
  • Step 2. Create a component(demo.component.ts) menu link to all the component in list
  • Step 3. Create route (app.module.ts) like demo/:id and link to the each component

If you interested in the code, you can navigate in the project