There is someway to stop storybook forcing rerendering? [ANGULAR]

[viniciusrvieira]

Summary

Hey guys,

I'm having some trouble trying to test a directive input change.

The main problem is that everytime i change a storybook's control, it triggers a rerender on my component, calling ngOnInit again and "masking" the result im expecting.

I'm using storybook as playground and trying to detect if my input change is calling the methods correctly, but this call rerenders and mask my expected result, that should be "only changing the input value" as angular works on runtime through dynamic fields.

If im missing something, please tell me.

Regards,
Vinicius.

Additional information

My render function:

render: (args: any) => ({
    props: args,
    template: `
      <pdz-button 
        [pdzBadge]="pdzBadge"
        [pdzBadgePosition]="pdzBadgePosition"
        [pdzBadgeSize]="pdzBadgeSize"
        [pdzBadgeColor]="pdzBadgeColor"
        [pdzBadgeIntensity]="pdzBadgeIntensity"
      >
        Button Component with Badge
      </pdz-button>
    `,
  })

package.json storybook versions:

Im not using last version cause of my angular version...

"@storybook/addon-actions": "^7.6.20",
"@storybook/addon-docs": "^7.6.20",
"@storybook/addon-essentials": "^7.6.16",
"@storybook/addon-interactions": "^7.6.16",
"@storybook/angular": "^7.6.16",
"@storybook/blocks": "^7.6.20",
"@storybook/core-server": "^7.6.16",
"@storybook/manager-api": "^7.6.20",
"@storybook/preset-scss": "^1.0.3",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^7.6.20",

Create a reproduction

No response

[dosubot[bot]]

Hi @viniciusrvieira! I'm Dosu and I’m helping the storybook team.

There isn't a built-in way in Storybook Angular (7.x) to prevent rerendering and ngOnInit from being called when you change controls. This is a known limitation, especially when using an inline template in your render function—each time the template changes (even if it's the same string), Storybook treats it as a new template and forces a full rerender, which re-triggers Angular lifecycle hooks like ngOnInit see details.

If you want to minimize rerenders, try using a component reference (not an inline template) in your story definition. For example:

export default {
  component: PdzButtonComponent,
  // ...other meta
};

export const Basic = {
  args: { /* your inputs */ },
};

This approach lets Storybook update inputs via props without recreating the component, so ngOnInit won't be called again unless the component or its module metadata changes reference.

If you need to use a custom template, make sure it's defined outside the render function so it doesn't get re-instantiated on every render. However, even with these workarounds, some rerendering is unavoidable due to how Storybook manages Angular stories.

There are some patterns for syncing component state with controls using decorators and wrapper components, but these don't prevent rerendering—they just help keep state in sync discussion.

In summary: this is a recognized limitation, and the best you can do is avoid inline templates in the render function and use component references where possible.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

Storybook Angular can update @input properties at runtime and trigger change detection without recreating the component, which closely emulates native Angular @input behavior—especially if you use a component reference in your story (not an inline template). Internally, Storybook wraps your component and subscribes to changes, calling markForCheck and detectChanges on OnPush components when controls change, so the instance stays alive and only the inputs update see implementation.

If you still see full rerenders or ngOnInit firing repeatedly, double-check that your story uses the component: field and not a custom render function with a template string. For example:

export default {
  component: PdzButtonComponent,
  // ...other meta
};

export const Basic = {
  args: { pdzBadge: '...', pdzBadgePosition: '...', /* etc */ },
};

This setup lets Storybook update inputs like Angular would at runtime, minimizing rerenders see test. If you need a custom template, define it outside the render function to avoid template recreation.

There are still some limitations—if you use an inline template or change module metadata, Storybook may force a full rerender. But with the component reference approach, you should get close to native @input runtime behavior.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[viniciusrvieira]

What do you mean by changing module metadata?

If i use the decorator: useModuleMetadata it always call a rerender?

Even if i use a storybook component story, called e.g. sb-button-story, how could i achieve the code example showed in the story to be the implementation inside sb-button-story.html and not a dumb call like <sb-button-story></sb-button-story?

[dosubot[bot]]

In Storybook Angular, "changing module metadata" means altering the configuration for your story's Angular module—like its imports, declarations, providers, etc. When you use the useModuleMetadata (or moduleMetadata) decorator, Storybook merges your new metadata with the existing one and treats it as a new module context. This always triggers a full rerender: Storybook destroys and recreates the Angular module and component for that story, so lifecycle hooks like ngOnInit will run again see implementation.

If you want your story to use the actual template from your custom component (like sb-button-story.html), define your Angular component with its template as usual, then reference it in your story's component field—do not use an inline template in the story. For example:

// sb-button-story.component.ts
@Component({
  selector: 'sb-button-story',
  templateUrl: './sb-button-story.html',
  // ...other config
})
export class SbButtonStoryComponent { /* ... */ }

// sb-button-story.stories.ts
export default {
  component: SbButtonStoryComponent,
  // ...meta
};

export const Basic = {
  args: { /* your inputs */ },
};

This way, Storybook will render your component using its real template, not just a wrapper. Controls will update inputs at runtime without recreating the component, unless you change the module metadata or template details. If you stick to updating args and avoid changing module metadata, you’ll get close to native Angular @input behavior.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[viniciusrvieira]

The problem i was having, was that i was debugging at "docs" page, using the <Primary> component.
Now, i perceived that the correct place to do this is inside each story, this keeps the state and doesn't force rerender.