[ScaleNotification] Events in Angular

[ch4d1]

Scale Version "@telekom/scale-components": "^3.0.0-beta.151",

Framework and version Angular 17.3.0

Code Reproduction Scale and Angular17

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Google Chrome
• Version: 125.0.6422.77

<div class="scl-toast-stack">
  <scale-notification
  heading="Warning toast headline"
  type="toast"
  variant="warning"
  dismissible
  opened
  (scaleOpen)="test('open')"
  (scaleBeforeClose)="test('BeforeClose')"
  (scaleClose)="test('Close')"
  >
    <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>
  </scale-notification>
</div>

Additional context It is very likely a user issue, as I am not an expert in using Angular. However, I need help with the usage of events from scale components. I am currently trying to capture events for a scale-notification, but these events do not seem to exist. I have created an example with CodeSandbox. I would expect that the events when closing a notification would trigger the function "demo". However, nothing happens. Am I missing something?

[tshimber]

hi @ch4d1 ! previously scale used camelCase notation for events, but since version v3 it uses kebab-case. in most of components the old version is still available, so you can use either e.g. scaleChange or scale-change. but for some newer components only kebab-version applies, so for notification component please use event names as written here:

we'll discuss and unify it and will fix 'Events in Angular' part in storybook, as it seems outdated.

[ch4d1]

Hi @tshimber,

Thank you for the clarification! I switched to using the kebab-case notation for the event, and everything is working now. I can’t believe I didn’t try that sooner. However, IntelliJ IDE is still flagging the Event by saying, "Event scale-open is not emitted by any applicable directives nor by the element."

It might be something specific to my setup, but I wanted to double-check. I do know that the React implementation doesn’t have this issue when using the proxy package... but for Angular, it's deprecated and outdated.

Thanks again for the help!

[tshimber]

Hi @ch4d1 ! Strange about the IDE, I don't see such in VS code, and there's an emit for scale-open on 'opened' prop changing:

and it fires:

I'll ask colleagues what could be the reason.

As for proxy package for Angular - yes, it is outdated, @telekom/scale-components@next is enough to work with Angular.