Storybook: Action Logger doesn`t handle events with template prop

[NasadiukVlad]

Describe the bug
Impossible to handle events for Action logger, if use template. Action logger is empty after an event was executed

To Reproduce

1. Create a component, for example, button, which will contain
2. Go to your stories and use template and props click.

Expected behavior
After button clicked, action logger display all info about the event

Code snippets
Story:

Component:

Component Template:

System:

• Windows 10
• Asus ZenBook
• Browser: Chrome
• Framework: Angular
• Addons: [if relevant]
• Version: 7.0.6

[igor-dv]

@NasadiukVlad,
Here is the working example of your use-case in our official angular example.
https://storybooks-angular.netlify.com/?selectedKind=Custom%7CStyle&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

Can you plase explain what is the difference, maybe it's not the same

[NasadiukVlad]

@igor-dv you are right! I just forget to add $event to selector in the story. Thanks!

[gerardcastell]

Hello, I face a complex problem since I wanted to mix ngx-translate with Knobs. I solved thanks to this issue Though, diving deeper I stumbled upon a problem. I started to use this feature with the 'StoriesOf' function, but eventually, I had to pass to an arrow function approach to build the story. The reason is, basically, for combine Knobs with the translate pipe and it works fine! Unfortunately, with the template on the arrow functions inputs works properly whilst actions don't! I leave an example below, thank you!
export const primary = () => ({ title: "UiEmptyScreen", moduleMetadata: { imports: [I18nModule], declarations: [UiEmptyScreenComponent], providers: [TranslateService] }, component: UiEmptyScreenComponent, template: [title]="title | translate"
[subtitle]="subtitle | translate"
[icon]="icon | translate"
[buttonTitle]="buttonTitle | translate"
(clickedButton)="clickedButton"

, props: { title: text("title", "dashboard.claim.empty_screen.TITLE"), subtitle: text("subtitle", "dashboard.claim.empty_screen.SUBTITLE"), icon: text("icon", "dashboard.claim.empty_screen.ICON"), buttonTitle: text( "buttonTitle", "dashboard.claim.empty_screen.BUTTON_TITLE" ), clickedButton: action("clickedButton event") } });

Component.ts:
`import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
selector: "presenter-empty-screen",
templateUrl: "./ui-empty-screen.component.html",
styleUrls: ["./ui-empty-screen.component.scss"]
})
export class UiEmptyScreenComponent {
@Input() title: string;
@Input() subtitle: string;
@Input() icon: string;
@Input() buttonTitle: string;
@Output() clickedButton = new EventEmitter();

constructor() {}

onClick(): void {
this.clickedButton.emit();
}
}
`
Any help is welcome!

[gerardcastell]

I've solved it! I attach the code below. Anyway, I would like to be capable of switch language translate with a knob, is it possible?
Thanks!
export const englishComponent = () => ({ moduleMetadata: { imports: [I18nModule], declarations: [UiEmptyScreenComponent], providers: [TranslateService] }, component: UiEmptyScreenComponent, template: [title]="title | translate"
[subtitle]="subtitle | translate"
[icon]="icon | translate"
[buttonTitle]="buttonTitle | translate"
(clickedButton)="clickedButton()"

, props: { title: text("title", "dashboard.claim.empty_screen.TITLE"), subtitle: text("subtitle", "dashboard.claim.empty_screen.SUBTITLE"), icon: text("icon", "dashboard.claim.empty_screen.ICON"), buttonTitle: text( "buttonTitle", "dashboard.claim.empty_screen.BUTTON_TITLE" ), clickedButton: () => TranslateService.use("es") } });