How to add a custom button in ckeditor toolbar grapesjs

Question

I want to add a custom button in ckeditor toolbar to open a own angular component in a modal, how can i add this button ?

      this.editor = grapesjs.init({
        ...this.interactiveEditorConstants.EDITOR,
        i18n: {
          locale: 'es',
          messages: { es: es }
        },
        plugins: [grapesCKEDITOR, grapesJSMJML, sessionStoragePlugin],
        pluginsOpts: {
          [grapesCKEDITOR]: {
            options: {
              startupFocus: true,
              extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
              allowedContent: true, // Disable auto-formatting, class removing, etc.
              enterMode: 2, // CKEDITOR.ENTER_BR,
              extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
              toolbar: [
                { name: 'styles', items: ['Font', 'FontSize'] },
                ['Bold', 'Italic', 'Underline', 'Strike'],
                { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
                { name: 'links', items: ['Link', 'Unlink'] },
                { name: 'aa', items: ['bb', 'cc'] }
              ]
            }
          },

Create a new button in ckeditor grapesjs toolbar