Advanced User Interface Controls and Components
In links below you can find available articles on different components, displayed in alphabetical order per each component.
Learn how to add a new group dynamically to Accordion component in Angular 2, using a context menu.
Provides information on adding a checkbox to the header of each group in Accordion component for Angular. Whenever checkbox is clicked, the group will become locked and can't no longer expand.
Learn how to add a tooltip to each group in Accordion component for Angular.Example shows usage of Tooltip directive that is attachable to any HTML element or Angular component.
A sample that explains how to create custom header for groups in Angular Accordion. Group header contains an icon, title in two lines and command buttons on right for editing and deleting of groups during run-time.
An overview of features included in Accordion component for Angular. IntegralUI Accordion is a fully customizable native angular component that represents a list of expandable panels arranged vertically.
An overview of features included in Button component for Angular. IntegralUI Button is a fully customizable native angular component that represents a button and can appear in pressed or normal state.
An overview of features included in Check Box component for Angular. IntegralUI CheckBox is a fully customizable native angular component that represents a check box.
An overview of features included in ComboBox component for Angular. IntegralUI ComboBox is a fully customizable native angular component with advanced features like: animations, dropdown list settings, events etc.
An example of a context menu for Angular, where some menu options have custom HTML elements. Using templates, you can add any HTML element or Angular component to each menu item.
Learn how to disable menu items in ContextMenu for Angular. Each menu item can be disabled based on custom conditions.
An overview of features included in ContextMenu component for Angular 2. IntegralUI ContextMenu allows you to attach a context menu to any HTML element or Angular component.
An overview of features included in Frame directive for Angular. IntegralUI Frame allows you to resize any HTML element on demand dynamically during run-time.
Learn how to display even/odd rows in alternate colors in Angular Grid component. You can create custom CSS classes for each state of a row: normal, hovered, selected and disabled.
This demo shows columns where they occupy the width of Angular Grid component in whole. Whenever column width changes, other columns automatically change their size to fill the available grid space. Each column can auto size within its minimum and maximum width set.
Learn how to add a dropdown button to column header in Angular Grid component. Each header displays a dropdown button on right side that when clicked shows a list of common options.
Learn how to create a column where each cell has a custom check box in Angular Grid component. You can customize the appearance of check box column using only CSS.
Learn how to create a custom sort operation and apply it to specific column in Angular Grid component. Whenever a column is clicked, all rows are sorted in either ascending or descending order.
This demo shows drag drop of rows from Grid to the TreeGrid components in Angular 2, and vice versa. You can set whether rows are draggable on general level for both components.
An example of drag drop operation where multiple rows are moved or copied within the Angular Grid component. You can select multiple rows from checkbox column or by clicking on rows while holding CTRL or SHIFT key, then you can drag and drop them at different position.
An example of Grid component for Angular, where you can edit the label of grid cells using a built-in text editor. Whenever a cell is clicked, a textbox will popup where you can enter a new string and change the cell label.
Learn how to use the built-in checkbox editor for cells in Angular Grid component. You can edit cells with boolean values using a custom checkbox that can display two or three state values.
An example with angular Grid where you can edit cells using a DatePicker. Learn how to enable the built-in date editor for all cells in specific column. In addition, see how to customize the date editor with custom CSS styles.
An example of Angular Grid where you can edit cells using a dropdown list as editor. You can change the appearance of the dropdown editor using custom CSS styles.
An example of Angular Grid, where you can edit numbers in grid cells using a built-in numeric up-down editor. Whenever editor is enabled, you can enter new numeric values using a keyboard or change the current number with up down buttons using a mouse or with touch.
Learn how to use the built-in Rating editor in cells of Grid for Angular. Editor is fully customizable, you can use your own images for rating values, all done through CSS.
Learn how to add one or more images to cells in Angular Grid component. You can place one or multiple images in a single cell from a local or remote source.
An overview of features included in Grid component for Angular 2. IntegralUI Grid is optimized to work with thousands of rows on client side. Supports drag drop operations, multi selection and it is fully customizable.
A demo on show or hide columns in Angular Grid component via context menu. Each column can be visible or hidden, depending on custom conditions set in your code.
An example of how to show or hide column header and footer in Angular Grid. You can hide either column header, footer or both.
An overview of features included in GroupBox component for Angular. IntegralUI GroupBox is a native angular component that represents a collapsible panel.
An overview of features included in ListBar component for Angular. IntegralUI ListBar represents a list of expandable groups with items.
Learn how to copy items during drag and drop in Angular ListBox component. You can copy one or more multiple items on drop at target location.
In this example, you can drag and drop items between ListBox and ListView components for Angular. By selecting one or multiple items and using drag drop, you can reorder items in both components during run-time.
An example of drag drop operation where multiple items are moved within Angular ListBox component. You can also move multiple items to other components, like a simple list.
Learn how to handle events that occur during item drag and drop in Angular ListBox component. Detailed explanation of supported drag drop events.
Learn about drag and drop operations in ListBox component for Angular. Presents information on how drag and drop items within the same or to other components and how to handle different events.
An overview of features included in ListBox component for Angular. IntegralUI ListBox allows you to present list of custom elements and arrange them dynamically using advanced drag drop operations.
There are four selection options in ListBox for Angular 2. This allows you to select one or multiple items, using mouse and keyboard CTRL or SHIFT keys.
An overview of features included in ListScroller component for Angular. IntegralUI ListScroller is a fully customizable native angular component that displays a scrollable item list in horizontal or vertical layout.
Explains how to populate the Angular ListView using custom JSON file as a data source. A demo is available that shows how to map data fields with the ones used by the list view.
Learn how to handle events fired during item drag and drop in Angular List View component. Information on how to handle events on drag over, drop, drag enter or leave.
An example of a ListView component for Angular, where each item has a CheckBox. Select items in ListView via a custom checkbox.
Shows how to load thousands of records in Angular ListView component. Using virtualization, you can populate the ListView with large data and work in the client.
An overview of features included in ListView component for Angular. IntegralUI ListView displays data in horizontal or vertical layout, and allows reordering during run-time using drag drop operations.
An overview of features included in Menu component for Angular. IntegralUI Menu allows you to create static and dynamic menus for your web pages.
An overview of features included in Paginator component for Angular. IntegralUI Paginator is a fully customizable native angular component that allows you to add pagination to each page in your application.
An overview of features included in ProgressBar component for Angular. IntegralUI ProgressBar is a fully customizable native angular component that shows the current progress or activity of a process. The progress bar can appear horizontally or vertically.
An overview of features included in Radio Button component for Angular. IntegralUI RadioButton is a fully customizable native angular component that represents a radio button, which replaces the standard HTML input element.
An overview of features included in Range directive for Angular. IntegralUI Range allows you set limits in which an element can resize during run-time, whenever a parent, page or window size changes. You can anchor elements to different sides of parent element: top, right, bottom, left or none.
An overview of features included in Rating component for Angular. IntegralUI Rating is a fully customizable native angular component that visualizes ratings.
An overview of features included in SlideBar component for Angular. IntegralUI SlideBar is a fully customizable native angular component that allows you to animate slides created using images or custom content.
An overview of features included in SplitContainer component for Angular. IntegralUI SplitContainer consists of two resizable panels separated by a splitter with tabs and command buttons
An overview of features included in Splitter component for Angular. IntegralUI Splitter represents a movable bar that can resize elements during run-time.
Provides information on how to add a vertical splitter between elements in Angular. Example shows two block elements divided vertically by a resizable splitter.
An example of TabStrip component for Angular, showing tabs in different colors. Learn how to use custom CSS styles to create multi colored tabs.
Presents a demo, different ways to scroll tabs in IntegralUI TabStrip component for Angular. Both scroll buttons are placed on the right side (inbound) or they are separated on left and right side with tabs in between (outbound).
Learn about drag and drop operations in TabStrip component for Angular. Presents information on how you can reorder tabs during run time, including how to handle different events.
An overview of features included in TabStrip component for Angular. IntegralUI TabStrip is a fully customizable native angular component that allows you to add tabs with custom content. You can create tabs in different shapes and place them in following orientations: top, right, bottom or left.
An overview of features included in Tooltip directive for Angular. IntegralUI Tooltip allows you to add tooltip to any HTML element on demand dynamically during run-time.
Learn how to add new rows on demand in Angular TreeGrid component. Each cell in a row is editable using an inline cell editor.
Learn how to create a deep copy of rows in Angular TreeGrid component. A row that is cloned will have the same data as original object by a different identifier. This prevents creation of duplicates in the Grid.
Learn how to create a custom dropdown list with checkboxes and add it to the cells in Tree Grid component for Angular. Using a dropdown editor you can change the value of each cell individually.
An example of a TreeGrid component for Angular, where you can edit grid cells in similar way like in Excel application. Using arrow and other keys, you can navigate among cells and quickly change their text.
An example of Angular Tree Grid where you can highlight a row by clicking a checkbox in first column cells. Using column header or parent row checkbox, you can highlight multiple rows at once.
Learn how to add a progress bar to cells in Angular Grid component. You can set a specific column to show a progress bar in each cell and change the way it appears using custom CSS styles.
Learn how to create a Grid column where each cell has a rating component, in Angular. Rating component is represented by stars or bricks and allows you to change the rating value in each cell on the fly.
Learn how to bind data fields from a custom data source to data fields in use by Angular Grid component. As an example, data is loaded from a JSON file where each object uses custom field names.
An overview of features included in TreeGrid component for Angular. IntegralUI TreeGrid displays hierarchical data structures in multiple columns. It has built-in virtualization that allows you to work with thousands of rows on client side. Supports drag drop operations, multi selection and it's fully customizable.
Make specific row visible in Angular TreeGrid by scrolling to it. If the row is deep within the tree hierarchy, all parent rows will expand in the process and the row will appear in center of current view.
Learn how to display a custom button bar whenever a row is hovered in Angular Grid component. You can add any custom sets of buttons or other content in a template, that will appear on row hovering.
An example of Angular Tree Grid where scrollbar is shown only when mouse hovers over the grid space, otherwise the scrollbar remains hidden.
An overview of features included in TreeList component for Angular 2. IntegralUI TreeList allows you to navigate through tree hierarchy showing only one list at a time.
Learn how to create new items dynamically within the UI of the Angular TreeView. Each item can have command buttons that adds new child items and creates the tree structure on the fly.
This demo shows how to enable auto expand option in Angular TreeView. When this option is active, whenever an item is dragged over some target item it will automatically expand the item after a minor delay.
This demo shows how to change the indent value between parent and child items in Angular TreeView. To remove the indentation, set the indent value to 0 and the TreeView will appear as flat expandable list.
Angular TreeView and Context Menu with edit options example. You can edit, cut copy or paste items using a custom context menu.
A detailed information with examples about handling drag and drop events in TreeView for Angular. You can handle drag drop on enter, over, drop and leave.
This demo shows how to drag drop items from one TreeView to another in Angular 2.You can set whether items can be dragged or dropped on general level for both tree views.
Learn how to add a check box to each item in Angular TreeView component. Whenever an item or its checkbox is clicked, values of checkboxes in parent and child items are also updated. This is called cascading changes to checkbox values.
An example of Angular TreeView component in compact view, showing only closely related items. Visible tree hierarchy shows only the selected item, its children and parents, while hiding all other unrelated items.
Learn how to add a CombBox to each item in Angular TreeView component. Whenever item is clicked, the underlined text is replaced by a combo box where you can choose another value.
A demo, explains how to populate the Angular TreeView using JSON file as a data source. You will learn how to bind the custom data fields with the ones used by the tree view.
Learn how to load data on demand in TreeView component for Angular. The example shows loading animation when new data is loaded from a remote JSON file into the specified item.
An overview of features included in TreeView component for Angular 2. IntegralUI TreeView displays data in a tree hierarchy and allows reordering during run-time using drag drop operations.
This demo shows how to scroll to specific item in Angular TreeView. The item will appear in center of current view. An easy way to scroll to selected item.
An example that shows different selection options in TreeView component for Angular. To select multiple items use CTRL or SHIFT keys. In addition, you can prevent selection using events.
Learn how to lock items in Angular TreeView and prevent them from expanding or collapsing. Each item displays a command button on right side which determines whether the item is locked or not.
Each article provides detailed information about the topic and a demo app that you can edit it on StackBlitz.