Suppose I have an Angular page with a button drawn on it:

<div class="fd-form__set">
                                    <div class="fd-form__item">
                                        <button (click) ="send()" class="fd-button fd-button--action-bar fd-has-float-left">
                                            Send to Back-end
                                        </button>
                                    </div>
                                    <br/><br/>
                                </div>
Copy the code

This button should look like this at runtime:

The implementation of the Send button is in the ts file corresponding to the Component HTML:

    send() {
        this.waiting = false;

        let data = {
            command: 'hash'.dateTime: Date.now(),
            originalString: this.stringToSend
        }

        this.broadcaster.broadcast('sendData', data);
    }
Copy the code

A breakpoint is triggered when a button is clicked at runtime:

Now you can debug it in Chrome Developer Tools.

Best practice for custom buttons in SAP Spartacus: Button TAB + Custom icon

This gives the hoverable effect of placing the mouse over the icon:

To hover on a normal icon, the display effect looks like this:

More of Jerry’s original articles can be found in “Wang Zixi” :

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: