Using finastra-design-system in angular 16

[st-clair-clarke]

Hello,
I am experimenting with your webcomponents in angular. The UI renders etc.

However, I am looking for info on the site about handling events eg button events, etc and have not found any. How do I access events in your webcomponents?

Thanks

[achilehero]

Hello!

Not all components emit custom events. The buttons, for example, are simple components (mainly made to look in a certain way) and would be handled just as any other button in an Angular app, like:
<fds-icon-button id="swagger-toolbox" icon="build_circle" label="Swagger toolbox" aria-label="Swagger toolbox" (click)="openAPIToolBox()" slot="actions" ></fds-icon-button>
So this has a normal (click) event handler defined by you.

Some of the components, like the notifications, have some custom events sent that you can catch and handle. If you go to Storybook: https://finastra.github.io/finastra-design-system/?path=/story/navigation-notifications--default, Sandbox, Actions tab, you will see the custom events emitted. Those you can catch and handle in an Angular app, like:
<fds-notifications [notifications]="notifications" (markonenotificationread)="markNotificationAsRead($event)" (markallnotificationsread)="markAllNotificationsAsRead()" (deleteonenotification)="deleteNotification($event)" (deleteallnotifications)="deleteAllNotifications()" (navigateto)="goToLocation($event)" slot="actions" ></fds-notifications>.

Hope this helps,
Cristian