```ts
// List.stories.ts

import { Story, Meta } from '@storybook/angular/types-6-0';

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';

import List from './list.component';
import ListItem from './list-item.component';

export default {
  component: List,
  title: 'List',
  decorators: [
    moduleMetadata({
      declarations: [List,ListItem],
      imports: [CommonModule],
    }),
  ],
} as Meta;

// Always an empty list, not super interesting
export const Empty: Story<List> = (args: List) => ({
  props: args,
  template: `<app-list></<app-list>`,
});

export const OneItem: Story<List> = (args) => ({
  props: args,
  template: `
    <app-list>
      <app-listitem></app-listitem>
    </<app-list>`,
});

export const ManyItems: Story<List> = (args) => ({
  props: args,
  template: `
    <app-list>
      <app-listitem></app-listitem>
      <app-listitem></app-listitem>
      <app-listitem></app-listitem>
    </<app-list>`,
});
```
