TypeScript @storybook/addon-knobs/angular text Examples

Example #1

File: custom-providers.stories.ts Project: lyndontavares/storybook

  .add('With knobs', () => {
    const name = text('name', 'Dynamic knob');

    return {
      component: ServiceComponent,
      props: {
        name,
      },
    };
  });

Example #2

File: custom-styles.stories.ts Project: lyndontavares/storybook

 .add('With Knobs', () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: text('text', 'Button with custom styles'),
     onClick: action('log'),
   },
   styles: [
     `
     storybook-button-component {
       background-color: red;
       padding: 25px;
     }
   `,
   ],
 }));

Example #3

File: di.component.stories.ts Project: lyndontavares/storybook

 .add('inputs and inject dependencies with knobs', () => ({
   component: DiComponent,
   props: {
     title: text('title', 'Component dependencies'),
   },
 }));

Example #4

File: custom-pipes.stories.ts Project: lyndontavares/storybook

 .add('With Knobs', () => ({
   component: NameComponent,
   props: {
     field: text('field', 'foobar'),
   },
 }));