How can I help you?
Prompt Library - AI Coding Assistant
23 Feb 202624 minutes to read
Speed up Angular development using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes.
How to use
Before starting, make sure your MCP server is set up and running.
- Choose a prompt that fits your needs.
- Copy the full prompt, including the
#sf_angular_assistant/#sf_angular_componenttool. - Customize the prompt for your specific use case.
- Execute the prompt via the MCP server.
- Always review and test the generated code before adding it to your project.
Component-specific Prompts
Grid
The Syncfusion Angular Data Grid delivers fast, flexible tables for large datasets with built-in interactivity.
#sf_angular_assistant How do I enable paging and sorting in the Syncfusion Angular Grid?
#sf_angular_assistant Show me an example of grouping and filtering data in the Grid component.
#sf_angular_assistant What’s the code to implement full CRUD operations in Syncfusion Angular Grid?
#sf_angular_assistant How can I add PDF and Excel export options to the Grid toolbar?
#sf_angular_assistant How do I configure virtual scrolling for large datasets in the Grid?
#sf_angular_assistant Create a multicolumn Grid to display product details with sorting and filtering.
#sf_angular_assistant How can I integrate a chat widget inside each row of the Syncfusion Grid?
#sf_angular_assistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling.
#sf_angular_assistant Why isn’t my Grid exporting to PDF and Excel correctly?
#sf_angular_assistant How do I enable inline editing for CRUD operations in the Grid?
#sf_angular_assistant Add custom toolbar buttons for PDF and Excel export in the Grid.
#sf_angular_assistant How can I dynamically configure multicolumn layout with filtering and sorting?
Chart
The Syncfusion Angular Chart suite offers versatile visualization tools across various series types for insightful data representation.
#sf_angular_assistant How do I bind both local and remote data sources to a Syncfusion Chart?
#sf_angular_assistant Show me how to enable range selection in a Syncfusion Angular Chart.
#sf_angular_assistant What chart types are available in Syncfusion Chart, and how do I configure them?
#sf_angular_assistant How can I display markers and data labels on a line chart?
#sf_angular_assistant Add custom annotations to highlight specific data points in a chart.
#sf_angular_assistant How do I export a Syncfusion Chart to PDF or image format?
#sf_angular_assistant Enable print functionality for a Syncfusion Chart component.
#sf_angular_assistant Create a chart that updates dynamically with remote API data.
#sf_angular_assistant How do I combine bar and line chart types in a single Syncfusion Chart?
#sf_angular_assistant Why isn’t my remote data showing up in the Syncfusion Chart?
#sf_angular_assistant Configure a range selector for zooming and filtering in a time-series chart.
#sf_angular_assistant Show me an example of customizing chart markers and data label styles.
Schedule
The Syncfusion Angular Schedule component helps manage events, resources, and timelines with powerful views and customization.
#sf_angular_assistant How do I inject required modules into the Syncfusion Angular Schedule component?
#sf_angular_assistant Bind the Schedule component to a remote API for dynamic event loading.
#sf_angular_assistant Show me how to implement full CRUD operations in the Schedule component.
#sf_angular_assistant Enable virtual scrolling for large event datasets in the Schedule view.
#sf_angular_assistant How can I configure timezone support in the Syncfusion Schedule?
#sf_angular_assistant Add export functionality to download the Schedule view as PDF or Excel.
#sf_angular_assistant How do I customize timeline header rows in the Schedule component?
#sf_angular_assistant Inject multiple modules like Day, Week, and Timeline views into the Schedule component.
#sf_angular_assistant Why aren’t my CRUD actions working correctly in the Schedule component?
#sf_angular_assistant Bind both local and remote event data to the Schedule component.
#sf_angular_assistant Configure timezone-aware exporting for the Schedule view.
#sf_angular_assistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting.
Kanban
The Syncfusion Angular Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows.
#sf_angular_assistant How do I bind local or remote data to the Syncfusion Angular Kanban board?
#sf_angular_assistant Enable sorting of cards within columns in the Kanban component.
#sf_angular_assistant Show me how to group Kanban cards using swimlane headers.
#sf_angular_assistant How can I enable inline editing of Kanban cards?
#sf_angular_assistant Configure virtualization for performance with large Kanban datasets.
#sf_angular_assistant How do I localize labels and messages in the Kanban component?
#sf_angular_assistant Enable drag-and-drop functionality for moving cards between columns.
#sf_angular_assistant Create a Kanban board with swimlane grouping and sortable cards.
#sf_angular_assistant Show me how to edit cards and apply localization in the Kanban component.
#sf_angular_assistant Why isn’t drag-and-drop working correctly in my Kanban board?
#sf_angular_assistant Bind remote data to the Kanban component and enable virtualization for performance.
#sf_angular_assistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop.
RichTextEditor
The Syncfusion Angular RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features.
#sf_angular_assistant How do I customize the toolbar options in the Syncfusion RichTextEditor?
#sf_angular_assistant Show me how to add, edit, and remove hyperlinks in the RichTextEditor content.
#sf_angular_assistant How can I render the RichTextEditor inside an iframe for isolated styling?
#sf_angular_assistant Inject feature modules like toolbar, link, and image into the RichTextEditor.
#sf_angular_assistant Enable undo and redo functionality in the RichTextEditor toolbar.
#sf_angular_assistant How do I integrate an Angular form and validate input?
#sf_angular_assistant Export RichTextEditor content to HTML or import existing HTML content.
#sf_angular_assistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo.
#sf_angular_assistant Use the RichTextEditor in iframe mode and bind it to a form for submission.
#sf_angular_assistant Enable undo/redo and export content to HTML in the RichTextEditor.
#sf_angular_assistant Inject toolbar and link modules to enable rich link editing in the editor.
Calendar
The Syncfusion Angular Calendar supports flexible date selection, localization, and custom rendering.
#sf_angular_assistant How do I enable date range selection in the Syncfusion Angular Calendar?
#sf_angular_assistant Configure the Calendar to support multiple cultures and languages.
#sf_angular_assistant Show me how to allow users to select multiple dates in the Calendar.
#sf_angular_assistant How can I switch the Calendar to use the Islamic calendar system?
#sf_angular_assistant Enable skipping months in the Calendar navigation for faster browsing.
#sf_angular_assistant How do I show days from adjacent months in the current Calendar view?
#sf_angular_assistant Customize the day cell format in the Calendar to show short weekday names.
#sf_angular_assistant Highlight weekends in the Calendar with a different background color.
#sf_angular_assistant Configure the Calendar for Arabic culture using the Islamic calendar and localization.
#sf_angular_assistant Enable both multi-date selection and range selection in the Calendar.
#sf_angular_assistant Why isn’t my Calendar selecting the correct date range?
#sf_angular_assistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights.