We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Essential JS 2 for Angular


What’s New in Essential JS 2 for Angular

Add even more features to your web apps with new Angular controls: menus, progress buttons, and the final version of the Scheduler control.


New components

The following components have been added to Essential JS 2 for Angular:

The Menu component is a graphical user interface that serves as a navigation header for your application or site. It supports data binding, templates, multilevel nesting, and horizontal and vertical orientation.

EJ 2 Menu component preview.

Progress Button

The progress button visualizes the progression of an operation to indicate to the user that a process is happening in the background. The progress can be shown with graphics accompanied by text.

EJ 2 Progress Button component preview.

Dark themes

Dark theme support has been added to existing Essential JS 2 themes and is available in Theme Studio.



Support for segmented, dashed, and recurrence striplines have been provided to the chart.



Pareto series type has been added to chart.


Axis label trim

Allows the users to trim axis labels to increase plot area of the chart.

Axis Label


Allows users to add subtitles to the chart.


Datetime label format

Label format for datetime axis has been improved for better readability of charts. For example, when the interval type of the axis is month, then the label for the first month of the year will display month and year, followed by months.

DateTime Axis

Broken slice

Allows users to split grouped slices in a pie chart.

Broken Slice


Now, the chart series can be animated on its visibility collapse using legend click.

Circular Gauge

Rounding the corners of ranges

You can now round the corners of ranges and the range bar pointer.

Circular range with rounded corners


Label interaction

Interaction support has been provided for labels. They can be selected, dragged, resized, and rotated.

Label interaction

Document Editor

Page break

The document editor allows users to insert page breaks in a document.

Page break support in Document Editor

File Upload

Directory upload

The Angular file upload component allows users to upload all files in a directory (folder) to a server. This feature processes all the files and subfolders in a selected folder.

Directory upload

Directory upload

Paste upload

Users can upload images automatically to a server on pasting them from the clipboard in the file upload component.


Reactive and template-driven form editing

Reactive and template-driven forms can be used to edit grid records.

Reactive form and template-driven form editing in DataGrid control.

Reactive aggregate update

When using batch editing, the aggregate values will be refreshed with the edited values before the bulk save operation. The group footer and caption aggregate values will also be refreshed with the new values for every cell value change.

Filter template support

An Angular component can be used as a custom filter UI to filter grid rows for a column.

Edit template support

An Angular component can be used as a custom editor for a column.

Grouped rows outlined in Excel exporting

Grouped grid rows are now outlined in the exported Excel document so that they can be used to hide grouped data for better reporting.

Additional checkbox selection behavior

A new checkbox selection mode has been added. It can be enabled to multi-select rows only with checkboxes and clicking a row will reset the selection, similar to selecting an item in Windows Explorer.

Windows Explorer-like checkbox selection in DataGrid control.

All option added in page size dropdown

An All option has been added to the page-size dropdown for fetching and displaying all available records from a given data source.

Support with All options in pager dropdown


Bubble heatmap

You can now visualize data in the Heatmap control using the bubble tiles. Bubble parameters such as size, shade, and sector can be used to visualize data.

Bubble heatmap

Smart legend

A fixed-palette legend type has been implemented in the Heatmap control to smartly display legend labels.

Smart legend support

Calendar heatmap

You can now visualize calendar data in the Heatmap control using axis label customization.

Calendar heatmap support

List View

Built-in CSS classes for template customization

You can now customize or prettify the list items with built-in CSS classes to display multi-line text, avatar and badge in the applications mail, contact, outlook, and more.

Angular ListView with multi-line text

Pivot Grid

Conditional formatting

Allows users to define condition based on value in order to format grid cell’s font style, font color, background color, border, and more.

Format pivot grid based on condition or criteria

Virtual scrolling

Now, large amount of raw data can be loaded into the pivot grid, aggregated, and viewed on-demand through horizontal and vertical scrollbar options with ease.

Virtual scrolling for better performance while loading large data

Label and value filters

Pivot grid headers and value cells can now be filtered using complex filter criteria with the help of label and value filters option similar to Microsoft Excel.

Label filters in Pivot Grid Value filters in Pivot Grid

Rich Text Editor

Image resize

Image resize support has been given for Rich Text Editor. Images in the editor can be resized manually by dragging its corners in the required direction.

Angular Rich Text Editor with image resize

Insert tables

Insert table support has been given for HTML Editor that includes the following sub features:

  • Create and modify tables, table rows, and columns.
  • Resize rows and columns.
  • Quick toolbar interaction.
  • Table header and custom styles.

Angular Rich Text Editor with Table


Timeline view

Displays the day, week, workweek, and month view layouts in timeline mode by illustrating both the date and time intervals in a horizontal orientation. It also organizes and displays multiple resources in a hierarchical tree structure based on the grouping levels.

Scheduler with timeline view

Header rows

Add custom header rows in timeline views to depict an individual row for displaying the corresponding year, month, week number, and dates.

Timeline scheduler with custom header rows

Drag and drop

Appointments can be easily rescheduled to another time by dragging and dropping them onto the required time slots.

Scheduler displaying event drag action


An appointment’s time can be easily extended by resizing its start or end handles.

Scheduler displaying event resize action

Other enhancements

  • Display the week number of the current date beside the date header section.

Scheduler displaying week number * We’ve provided template support for customizing a pop-up that opens when cells or appointments are selected. * The data type of the appointment ID field has been made compatible to accept both string and number type values.

Text box

Text box as Angular component

The text box can be rendered as a separate Angular component to add floating labels. This version of the component supports all the features available in the pure CSS version of the text box.

Text box

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon