Knobs-addon: Angular Components lose interactivity after adjusting property via knob

Describe the bug When adjusting properties on an Angular component via a Knob, the Angular component interactions start having issues.

To Reproduce Steps to reproduce the behavior:

1. Configure a story using the code snippet below
2. Change a property using the knob add-on (change the first label to “error”)
3. Click the Second Tab in the preview pane
4. Notice the tab content does not change
5. Click the tab content
6. Notice the tab switches

The example leverages @angular/material, but I came across this via proprietary components as well.

Expected behavior Component should continue to work as expected after changing property via knob.

Code snippets

storiesOf('Tabs', module)
  .addDecorator(
    moduleMetadata({
      imports: [
        BrowserAnimationsModule,
        MatTabsModule,
        MatIconModule,
      ],
    }),
  )
  .add(
    'with knobs',
    () => ({
      template: `
      <mat-tab-group>
        <mat-tab *ngFor="let item of items">
          <ng-container *matTabLabel>
            <mat-icon>{{ item.icon }}</mat-icon>
            <span>{{ item.label }}</span>
          </ng-container>
          <ng-container *matTabContent>
            Content
          </ng-container>
        </mat-tab>
      </mat-tab-group>
    `,
      props: {
        items: object('items', [
          {
            label: 'first',
            icon: 'home',
          },
          {
            label: 'second',
            icon: 'face',
          },
          {
            label: 'third',
            icon: 'group_work',
          },
          {
            label: 'fourth',
            icon: 'grade',
          },
          {
            label: 'fifth',
            icon: 'feedback',
          },
        ], 'TABS-GROUP'),
      }
    }),
    { notes: 'My notes' }
  );

System:

• OS: Windows 10
• Browser: Chrome
• Framework: Angular
• Addons: @storybook/addon-knobs
• Version: 5.1.9

[mgameover]

Just checked that with the official sample (storybook/examples/angular-cli v6.0.0-alpha.33). The same thing, it stops working after changing visibility using *ngIf.

But it works with v5.0.11 So, I believe @andrei-ilyukovich is right about the root cause - comment.

[literalpie]

I’m still seeing this issue in 5.2.5.

tried with 5.3.0-alpha.34, but the knob wasn’t showing up at all! I think that’s a different issue though…

edit: I’m only seeing this issue when using addon-docs. That might change things