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

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