ngOnChanges not triggered in Angular when using controls in Storybook to change a value in a variable in a component

Question

Im using storybook to create a component library, I came across this issue where my component has a ngOnChanges method implemented that doesn't run when I pass in the value from Storybook Controls. The value gets passed from the story to the component and the component makes the visual changes to the title, however my ngOnChanges method does not get triggered although the value gets passed to the variable.

This is my story book code where I pass the value:

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';

import { CountComponent } from '../app/count/count.component';

export default {
  title: 'Example/Count Component',
  component: CountComponent,
} as Meta;
const Template: Story<CountComponent> = (args: CountComponent) => ({   component: CountComponent,   props: args, });
    
export const Title = Template.bind({}); Title.args = {   widgetName: '', };

so as shown here I try to pass the value from story "Title" to the widgetName variable shown below, thereby I'm expecting to be passed to the count component @Input() widgetName ="Total Confirmed"; which on change should trigger ngOnChanges when the variable value changes through the storybook template

This is where I try to pass the value in the story.

This is my count component:

export class CountComponent implements OnInit {

  @Input() widgetName ="Total Confirmed";


  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges() {
    console.log(this.widgetName)
    //other methods
  }

}

upon some searching I've noted that this issue was raised on GitHub and the members of story book have responded saying we can use the Knobs add on. However the Knobs addon has been deprecated , therefore I need help to resolve this issue? Thanks in advance. There's a similar issue raised on github - https://github.com/storybookjs/storybook/issues/15610

Olivette

By default ngOnChanges() can't detect changes happening in storybook. Storybook components by itself aren't running in Angular's change detection cycle. So you can't hook OnChanges() to detect changes made in storybook. But I see you are using @Input()? That we can dedect. Please post more relevant code, like from where are you sending data to @Input? Anyway, when using ngOnChanges hook, implement SimpleChanges. ngOnChanges(changes: SimpleChanges) { console.log(changes) //other methods } – Impure

there is already a issue opened on GitHub with the same issue....github.com/storybookjs/storybook/issues/… is no solution. – Olivette

@Joosep.P I updated my issue, I also tried using SimpleChanges, it doesn't work. What I noticed is that the value doesn't pass to the @Input() widgetName ="Total Confirmed"; from the story. If you trigger ngOnChanges manually you could see it console logs as "undefined" – Olivette

I also tried using Knobs add-on but still no result – Olivette

Answer 1

According to your CountComponent. You did not implements OnChanges interface.

Try to implement it too. This is an example.

export class CountComponent implements OnInit, OnChanges {

Note that if you're not working with OnInit lifecycle hook, is better to remove it

Whittaker

didnt work there's nothing on the console – Olivette