How to Render Dropdown Button in Angular Rich Text Editor?

2 mins read

In Angular Angular RichTextEditor, you can render a dropdown button in the toolbar by utilizing the template option within the toolbarSettings property. This allows for the inclusion of custom templates in the toolbar items.

Implementation Steps

1. Define Toolbar Items in Component

In your component TypeScript file (e.g., app.component.ts), you can define the toolbar items, including the dropdown button with the desired templates. Here’s an example:

public tools: object = {
    items: [
       'Bold',
       'Italic',
       'Underline',
        '|',
        { tooltipText: 'Insert Field', template: '#insertField' },
    ],
};

2. Create the Dropdown Button in HTML

In your component HTML file (e.g., app.component.html), you can create the dropdown button using the ejs-dropdownbutton directive. Here’s how you can set it up:

<button
    class="e-rte-dropdown-btn e-control e-dropdown-btn e-lib e-btn e-rte-dropdown-popup 
           e-rte-dropdown-items e-formats-tbar-btn e-rte-elements e-tbar-btn"
    id="insertField"
    ejs-dropdownbutton
    [items]="items"
    [content]="dropdownContent"
    (select)="onItemSelect($event)"
></button>

Conclusion

By following the above steps, you can successfully render a dropdown button in the Angular RichTextEditor using the template option in the toolbar settings. This allows for enhanced functionality and customization of the editor’s toolbar.

Additional References

Conclusion
I hope you enjoyed learning on how to render dropdown button in Angular Rich Text Editor.
You can refer to our Angular Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Rich Text Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)