angular-ui-components-skills

Implement and configure the Syncfusion Angular Gantt Chart component (ejs-gantt, GanttModule). Use this when building Angular applications with Gantt chart functionality, task scheduling, dependencies, or resource management. Covers component setup, task dependencies, taskbar editing, critical path analysis, resource allocation, timeline configuration, filtering, sorting, export, undo/redo, state persistence, and localization.

Build and configure Syncfusion EJ2 Angular Diagram for flowcharts, org charts, process diagrams, and data-visualization. Trigger when users ask to create nodes/connectors, apply layouts, swimlane, use BPMN/UML shapes, or add interactivity like drag-drop, zoom/pan, snapping, editing, and symbol palettes.

Use this skill when users ask how to build or customize Syncfusion PivotView pivot tables in Angular. Trigger for Angular pivot grid/OLAP, aggregation, data binding (JSON/remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Angular-only, not React/Vue/Blazor.

Implement and customize Syncfusion Angular Accumulation Charts (Pie, Doughnut, Pyramid, Funnel) with data binding, labels, legends, and tooltips. Use this when creating accumulation charts, configuring chart types, customizing data visualization, adding annotations, or handling interactive chart events in Angular applications.

Implement Syncfusion Angular Bullet Chart component for performance comparison visualizations. Use this when displaying actual vs target values, defining quality ranges, customizing axes and labels, or creating accessible performance indicators. Covers getting started, data binding, axes configuration, visual elements, and customization.

Comprehensive guide for implementing Syncfusion Angular button components including Button, ButtonGroup, DropDownButton, Floating Action Button (FAB), ProgressButton, RadioButton, Switch, Speed Dial, SplitButtons, and Chips. Use this when implementing and styling these components - covering visual styles (primary, outline, toggle, icon, round, block), grouping, dropdowns with popup items and animations, FAB positioning/scoping, Speed Dial linear/radial action items, progress-enabled buttons, and toggle/radio controls.

Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.

Implement Syncfusion Angular Chart component for professional data visualization. Use this when creating or customizing charts such as line, bar, column, area, pie, financial (candlestick, OHLC), scatter, bubble, or stock charts. Supports axes configuration, series binding, legends, tooltips, zooming, real-time updates, technical indicators, themes, export, and accessibility features.

Implement Syncfusion Angular Circular Gauge component for radial data visualization. Use this when building circular gauges for dashboards, monitoring displays, performance metrics, speedometers, or KPI indicators. Covers installation, axes configuration, pointer types (needle, range bar, marker), ranges, styling, animations, and user interactions.

Implement the Syncfusion Angular File Manager component for file browsing, management, and operations. Use this skill whenever the user needs to create a file manager interface, handle file operations like upload/download/delete, manage folders, or customize file browsing experiences in Angular applications.

Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.

Implement Syncfusion Angular HeatMap Chart component for visualizing two-dimensional data with color gradients. Use this skill whenever users need to create heatmaps, visualize data matrices, display data with color-coded cells, configure axes (numeric/categorical/datetime), add legends, customize colors and rendering modes, handle cell selection and events, or implement accessibility features. Includes data binding, axis types, interactive selection, tooltips, and bubble heatmaps.

A comprehensive guide to implementing Syncfusion Angular Input components, including Uploader, NumericTextBox, TextBox, Signature, CheckBox, OTP Input, RangeSlider, TextArea, ColorPicker, MaskedTextBox, and Rating. This guide is intended for building Angular applications with file upload UIs supporting async and chunked uploads, drag‑and‑drop functionality, numeric inputs with validation and formatting, text inputs with floating labels and custom adornments, digital signature capture with undo, redo, and export capabilities, checkbox multi‑select and indeterminate states, seamless form integration, accessibility compliance, one‑time password (OTP) inputs, programmatic row adjustments, slider tick customization and styling, visual color selection with HSV picker and palette support, masked text input for structured data entry, and interactive star rating components.

Create and customize Syncfusion Angular Linear Gauge components for displaying measurements and metrics. Use this skill when user needs to implement a linear gauge, display scalar values in a linear scale, create measurement interfaces, configure ranges and pointers, add annotations, handle user interactions, or customize gauge appearance. Covers installation, configuration, events, accessibility, printing, and internationalization.

Implement Syncfusion Angular Maps component for geographical data visualization. Use this when users need to display maps, visualize geographical data with markers and bubbles, integrate map providers like Bing or OpenStreetMap, render GeoJSON shapes, or create choropleth maps with color-coded regions. Supports interactive features like zooming, panning, layers, legends, tooltips, color mapping, and accessibility.

Comprehensive guide for implementing Syncfusion Angular notification components including Message, Skeleton, Toast, and Badge. Use this when displaying informational, success, warning, or error alerts with severity levels, customizing message variants (Text, Outlined, Filled), handling close events, showing content skeletons with shimmer/pulse animations during data loading, or adding status badges with 8 color variants and shape types (circle, pill, notification, dot, overlap). Covers MessageModule, SkeletonModule, ToastModule, CSS-based Badge implementation, accessibility, RTL, and custom styling in Angular applications.

Implement interactive Range Navigator in Angular applications using Syncfusion. Covers data binding from local and remote sources, axis configuration (numeric and date-time), series types, tooltip customization, period selector setup, lightweight mode, RTL support, axis labels and formatting, grid ticks, print/export functionality (PNG, SVG, PDF), and accessibility features. Use this skill when creating data range selection tools, timeline navigators, and interactive data exploration components.

Implement Syncfusion Angular Smith Chart component for high-frequency circuit visualization and transmission line analysis. Use this skill whenever the user needs to create smith charts, visualize impedance or admittance parameters, add multiple series to a smith chart, customize axes and gridlines, configure markers and data labels, implement legends with visibility toggling, add tooltips and export functionality, or styling and accessibility. Covers installation, basic rendering, series management, axis configuration, marker/label customization, legend setup and advanced features.

Implement Syncfusion Angular Stock Chart component for displaying financial data and OHLC charts. Use this skill whenever users need to create stock charts, display candlestick or OHLC data, add technical indicators, implement date range selection, or work with time-series financial visualization. Includes series types, axis customization, interactive features, and export capabilities.

Guide for implementing Angular Accordion components for collapsible content panels, expandable sections, FAQs, multi-step wizards, step-by-step forms, navigation menus, or tabbed navigation. Use this skill when users mention expanding/collapsing content, accordion layouts, step-by-step workflows, or hierarchical content organization. This skill covers initialization, expand modes, data binding, dynamic loading, animations, nested accordions, and real-world patterns.

Implement Syncfusion Angular AppBar component for navigation, branding, and actions. Use this skill when user needs to add top or bottom navigation bar, sticky headers, AppBar with buttons/menus/sidebars, positioning options, sizing modes (Regular/Prominent/Dense), color modes (Light/Dark/Primary/Inherit), and styling customization. Covers AppBar properties like isSticky, enablePersistence, enableRtl, htmlAttributes, responsive navigation patterns, action bars, header layouts, and navigation components.

Learn how to implement the Syncfusion Angular Carousel component for displaying slides with images and content. This comprehensive skill includes complete API documentation with all 30 properties, 5 methods, 2 events, and working code examples. Use when creating image galleries, product showcases, featured content sliders, news rotators, or implementing carousel navigation with animations.

Implement Syncfusion Angular ContextMenu component for right-click and touch-hold menus. Use this skill when user needs to create context menus, add/remove/enable menu items, handle menu clicks, customize animations, apply templates, handle data binding, trigger dialogs from menu items, show/hide items dynamically, add icons, create scrollable menus, or customize menu appearance.

Create responsive grid-based dashboards with draggable, resizable panels. Use this skill when implementing Syncfusion Angular Dashboard Layout, creating customizable dashboard layouts, adding dynamic panels, enabling drag-drop panel repositioning, resizing panels, saving/restoring dashboard states, making dashboards responsive, or styling dashboard components with CSS customization.

Guide for implementing Syncfusion Angular ListView component. Use this skill when building interactive lists with data binding, grouping, templates, selection, events, drag-and-drop, or virtualization features. This skill covers getting started, data binding, customization, selection, advanced features, specialized use cases, styling, and accessibility for building production-ready list interfaces.

Guide for implementing Syncfusion Angular Menu component. Use this skill when the user needs to create navigation menus, hierarchical menu structures, submenu items, menu events, animation, orientation changes, RTL support, or customize menu appearance. Covers installation, data binding, templates, events, styling, accessibility, and real-world implementations like sidebar menus and toolbars.

Guide for implementing Syncfusion Angular Sidebar component for navigation, collapsible menus, and dynamic content. Use this when creating sidebars with multiple positioning options, animations, gestures, docking, responsive behavior, TreeView/ListView content, and backdrop overlays. This skill covers sidebar navigation, toggle menus, responsive navigation panels, collapsible layouts, and expanding/collapsing navigation elements.

Implement interactive 3D charts in Angular applications using Syncfusion. Guide covers setup, chart types (bar, column, stacked variants), customization, data binding, axis configuration, legends, tooltips, selection, data labels, appearance styling, dimensions, print/export, and accessibility. Use this skill whenever a user needs to create, configure, or customize 3D chart visualizations.

Implement interactive 3D circular charts in Angular applications using Syncfusion. Covers pie and donut chart creation, data binding, data labels with positioning and templates, empty points handling, tooltips with custom formatting, legend configuration, titles and subtitles, and print/export functionality (PNG, SVG, PDF). Use this skill when creating 3D circular visualizations for data representation, comparison, and interactive user engagement.

Implement Angular Progress Bar components for visual progress tracking. Use when you need to show determinate, indeterminate, or buffered progress in linear or circular shapes with animations, customization, and accessibility support.

Create and configure Syncfusion Angular Sankey diagrams for flow visualization. Use this when visualizing weighted flows, processes, and hierarchical relationships. Supports node and link styling, legends, tooltips, events, accessibility features, and comprehensive data binding for complex flow diagrams.

Implement Syncfusion Angular Sparkline component for compact data visualization. Use this skill whenever the user needs to create sparkline charts, visualize small datasets inline, add markers or data labels, implement different sparkline types (Line, Column, Area, Pie, Win-Loss), or handle sparkline customization like tooltips, axis settings, and theme styling. Covers installation, basic rendering, type selection, marker configuration, data label formatting, advanced features, accessibility, and migration from EJ1.

Create and customize Syncfusion Angular TreeMap components for hierarchical data visualization. Use this skill when you need to implement a TreeMap, visualize hierarchical data structures, configure multi-level layouts, apply color mapping, enable drilldown navigation, add labels and tooltips, configure legends, handle selection and highlight, export to images or PDF, print, or customize internationalization and accessibility. Covers installation, data binding, layout types, levels, color mapping, labels, tooltips, legends, drilldown, interactivity, print/export, RTL, locale formatting, and accessibility.

Guide for implementing Syncfusion Angular Breadcrumb components for navigation trails. Covers installation, data binding, navigation setup, icons, overflow modes, and template customization. Use this when building breadcrumb navigation that displays user location in hierarchies, enables clicking parent items for navigation, adds icons for visual context, or customizes appearance with templates.

Implements Syncfusion Angular Card components with headers, images, action buttons, and configurable layouts. Use this skill when building flexible, reusable card interfaces with custom styling, CSS classes, and component integration patterns for displaying content in structured card formats.

Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.

Comprehensive guide for implementing Syncfusion Angular dropdown components including AutoComplete, ComboBox, DropDownList, ListBox, Mention, MultiSelect and MultiColumn ComboBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences in Angular applications.

Implement the Syncfusion Angular Markdown Converter to convert Markdown text into clean HTML. Use this when converting Markdown to HTML in Angular, integrating a live Markdown preview, configuring GFM or line break options, or working with MarkdownConverter.toHtml() and MarkdownConverterOptions. This skill covers the @syncfusion/ej2-markdown-converter package and Markdown Editor integration with side-by-side HTML preview.

Comprehensive guide for implementing Syncfusion Angular popup components including Dialog, Predefined Dialogs and Tooltip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in Angular applications.

Implement the Syncfusion Angular Query Builder component for visual query construction, dynamic filtering, and rule management. Use this when building visual filter UIs, creating query conditions programmatically, importing/exporting SQL or MongoDB queries, or customizing query builder templates. This skill covers data binding, column configuration with operators, rule groups, theming, and Angular forms integration for the QueryBuilder (ejs-querybuilder) component.