How to connect ngModelChange to an action?

[SebastianStehle]

Hi,

I have the following story definition

export default {
    title: 'Framework/CodeEditor',
    component: CodeEditorComponent,
    argTypes: {
        disabled: {
            control: 'boolean',
        },
    },
    args: {
        change: action('ngModelChange'),
    },
    render: args => ({
        props: args,
        template: `
            <div>
                <sqx-code-editor 
                    (ngModelChange)="change"
                    [ngModel]="ngModel">
                </sqx-code-editor>
            </div>
        `,
    }),
    decorators: [
        moduleMetadata({
            imports: [
                FormsModule,
            ],
        }),
    ],
} as Meta;

I have shorten it a little bit. Now I try to figure out how to bind ngModelChange to an action. Nothing seems to work, but ngModel works actually fine.

[Marklb]

I just took a look and this seems to be sort of a bug. Looking at the code, I think I understand what is going on, but I am trying to remember the reason before I can say if this is a bug that needs to be fixed. If it isn't going to be fixed, the docs or maybe a logged warning should be added to make it more obvious what is going on.

What you have should work, based on the docs, but for Angular args are being filtered out if the ArgType does not define an action or control property. If you are using compodoc then what you have should work, if ngModelChange was an output of CodeEditorComponent. ngModelChange is an output of the decorator, so the output isn't known at the time argTypes are auto-populated.

The following should be a working version of your snippet. I set the action property in argTypes and Storybook will add a function for you, if you don't set your own in args.

export default {
    title: 'Framework/CodeEditor',
    component: CodeEditorComponent,
    argTypes: {
        disabled: {
            control: 'boolean',
        },
        change: { action: 'ngModelChange' },
    },
    render: args => ({
        props: args,
        template: `
            <div>
                <sqx-code-editor 
                    (ngModelChange)="change($event)"
                    [ngModel]="ngModel">
                </sqx-code-editor>
            </div>
        `,
    }),
    decorators: [
        moduleMetadata({
            imports: [
                FormsModule,
            ],
        }),
    ],
} as Meta;

Edit: Fixed binding based on comment.

[SebastianStehle]

It works like this:

export default {
    title: 'Framework/CodeEditor',
    component: CodeEditorComponent,
    argTypes: {
        change: {
            action:'ngModelChange',
        },
    },
    render: args => ({
        props: args,
        template: `
            <div>
                <sqx-code-editor 
                    (ngModelChange)="change($event)">
                </sqx-code-editor>
            </div>
        `,
    }),
    decorators: [
        moduleMetadata({
            imports: [
                FormsModule,
            ],
        }),
    ],
} as Meta;

The binding was also not correct. My mistake