Controls not's works with angular after change

[ClemThu]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Please provide issue details here - What did you expect to happen? What happened instead?
When i change controls my angular components is not update, it works if i set default value but when i use controls to change angular components is not full loaded. I don't understand why ... i think issue is with *ngIf. I don't find doc or github for fix it ? It's works fine with simple html change but not on JS

Steps to reproduce

import {
Meta,
Story,
ArgsTable,
Description,
Canvas,
} from '@storybook/addon-docs/blocks';
import { MyseDatagridModule } from './myse-datagrid.module';
import { MyseDatagridComponent } from './myse-datagrid.component';
import { moduleMetadata } from '@storybook/angular';
import { SeWebModule } from '@se/web-ui-angular';
import { action } from '@storybook/addon-actions';
import { boolean, select, text, date, withKnobs } from '@storybook/addon-knobs';

export const argTypes = {};

<Meta
title="HOME PAGES/Datagrid"
component={MyseDatagridComponent}
argTypes={argTypes}
decorators={[
moduleMetadata({
imports: [MyseDatagridModule, SeWebModule],
}),
withKnobs,
]}
/>

export const ngModelChange = action('ngModelChange');

Input component

export const Template = (args) => ({
component: MyseDatagridComponent,
props: args,
});

{Template.bind({})}

Properties

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/angular v6.0.21
Angular 10

[github-actions]

Automention: Hey @MaximSagan @kroeder, you've been tagged! Can you give a hand here?

[Marklb]

I don't know what is going on, since there isn't any implementation details and only a mention of a *ngIf that I assume is somewhere in your component.

My best guess is that it has to do with control changes emitting outside the zone, but I am just guessing, since the problem happens when using a control. If that is the problem, it should be fixed by #12382.

[ThibaudAV]

@ClemThu can you test with the latest version of storybook ?
Otherwise I think this issue is solved with #12382 🤔
Or we need more information to reproduce 🐛

FYI :

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.0 containing PR #12382 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[rdebeasi]

Hello! I'm experiencing a similar issue with @storybook/angular 6.4.19 and Angular 12. The controls work with the default components that are created when you initialize Storybook, but they don't work with my own components.

Args set in the story take effect, but args set in the controls do not. Here are a few example snippets:

From Button.stories.ts

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  id: 'foo'
};
export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary'
};

From button.component.ts

export class ButtonComponent {
  @Input() id?: string;

From button.component.html

<button
  [attr.id]="id"

The id foo is applied to the primary button, but nothing happens when I use the controls to set an id on the primary or secondary button.

[ndelangen]

@rdebeasi can you supply a reproduction, so we can investigate?

[abraham-becker-buildium]

Hello! I'm experiencing a similar issue with @storybook/angular 6.4.19 and Angular 12. The controls work with the default components that are created when you initialize Storybook, but they don't work with my own components.

Args set in the story take effect, but args set in the controls do not. Here are a few example snippets:

From Button.stories.ts

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  id: 'foo'
};
export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary'
};

From button.component.ts

export class ButtonComponent {
  @Input() id?: string;

From button.component.html

<button
  [attr.id]="id"

The id foo is applied to the primary button, but nothing happens when I use the controls to set an id on the primary or secondary button.

Did you find a solution @rdebeasi ? I'm having the same issue where args are set, but control modifications are not updating the rendered component..

[rdebeasi]

I ended up hiding the controls, so I haven't dug in any further. Sorry about that!

If you could create a repro, that would help the Storybook folks troubleshoot. (A repro would also help determine whether the bug still exists in Storybook 7.)

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.