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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Syncfusion Angular UI Components

ESSENTIAL STUDIO 2022 VOLUME 3

What’s New in Syncfusion Angular UI Components

The third release of the year improves Syncfusion’s Angular suite with seven new components, virtual scrolling in Scheduler’s vertical view, and an @mention feature in the Rich Text Editor.

What's New | Essential JS 2 for Angular | Common | Syncfusion

Common

New components

The following components have been added:

  • Image Editor
  • Floating Action Button (FAB)
  • Speed Dial
  • Skeleton
  • AppBar
  • Message
  • Mention

AppBar (Preview)

The Angular AppBar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.

Key features

  • Modes: Regular, prominent, and dense modes define the AppBar height.
  • Content arrangement: Spacer and separator options can be used to align the content with minimal effort.
  • Color: Primary, light, dark, and inherit options to customize the Appbar color.
  • Position: Appbars can be placed at the top or bottom of the screen. They can also be sticky.

Angular AppBar Component Demo

Angular AppBar

Mention component (Preview)

The @Mention component can be used to display a pop-up suggestion list whenever the designated mention key character is entered into a text box, rich text editor, or other editable element.

Key features:

  • Data binding: Binds the list of items from local and remote data sources such as JSON, OData, WCF, and RESTful web services.
  • Grouping: Groups the logically related items under a single or specific category.
  • Filtering: Filters the list items based on a character typed in the component.
  • Sorting: Sorts the list items in alphabetical order (either ascending or descending).
  • Highlight search: Highlights the typed text in the suggestion list.
  • Templates: Customize the list item, display value, no records, and spinner loading content.
  • Accessibility: Built-in accessibility support helps to access all the Mention component features using keyboards, on-screen readers, or other assistive technology devices.

Angular Mention Component Demo

What's New for Angular Carousel Component | Syncfusion

The Angular Carousel shows one complete slide and a partial view of adjacent (previous and next) slides at the same time. Find the demo link here.

Partial visible carousel

What's New for Angular Chart Component | Syncfusion

Chart

Border support for area charts

Provided border support for area chart types like Area, Step Area, Spline Area, Stacked Area and 100% Stacked Area. Find the demo link here.

Border support for area charts

Bubble and scatter charts in canvas

Provided support to render scatter and bubble charts in canvas mode. Find the demo link here.

Bubble and scatter charts in canvas mode

Zooming and panning toolbar

During the initial rendering, a toolbar for zooming and panning has been added to the chart. Find the demo link here.

Zooming and panning toolbar

Formatting Data Labels

It is now possible to format data labels in the chart, and it supports all global formats.

Formatting Data Labels

What's New for Essential Angular Data Grid | Syncfusion

Data Grid

Shimmer loading placeholder

This feature helps improve visualization while loading data by showing a placeholder in grid cells until the data operation is completed. Find the demo link here.

Angular Grid with shimmer loading placeholder

Infinite scrolling with lazy load grouping

When infinite scrolling is enabled in a grid, lazy load grouping renders records in a collapsed state when binding large amounts of data. The grouped items with N levels of data will be loaded on demand with infinite scrolling when the corresponding group is expanded. Find the demo link here.

Angular Grid infinite scrolling with lazy load grouping

What's New for Angular Diagram | Syncfusion

Diagram

Freehand drawing

This feature allows users to draw freeform curves (splines) on the diagram page.

Freeform curves drawn using Diagram control

Additional auto scroll support

This feature automatically scrolls the diagram whenever nodes are resized and the connector end point is dragged beyond the boundary of the diagram.

Auto scroll during node resize and connector end point dragging

What's New in Essential JS 2 Angular Word Processor | Syncfusion

Word Processor

Show paragraphs and hidden marks

This feature shows or hides paragraph marks and other hidden formatting symbols in the Word Processor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document. Find the demo link here.

Show paragraph and other hidden marks in Word Processor.

What's New for Angular Floating Action Button (FAB) Component | Syncfusion

Floating Action Button (Preview)

The Angular Floating Action Button (FAB) appears in front of all the contents of a page and performs a primary action.

Angular Floating Action Button Component Demo

Angular Floating Action Button

Positioning

Place the Floating Action Button in various built-in positions on the target element. Angular FAB positioning

Appearance

The Floating Action Button supports several predefined styles.

Angular FAB with different predefined styles

What's New for Essential Angular Gantt Chart | Syncfusion

Gantt Chart

Parent predecessor

Provides support to map predecessor dependency between parent-to-parent and parent-to-child tasks. Find the demo link here.

Parent Predecessor in Angular Gantt Chart

Alphanumeric support for task field’s ID

The ID TaskField that is used to map the tasks from the data source for displaying them in a hierarchical structure, now supports alphanumeric values. It also accepts integers and strings values.

Alphanumeric support for task ID in Angular Gantt Chart

Row drag and drop with virtualization

User can drag and drop rows to reorder them when the row virtualization feature is enabled. Find the demo link here.

Row drag and drop with virtualization in Angular Gantt Chart

Excel-like filtering

Provides support to filter Gantt Chart rows similar to standard Excel filtering functionality. The Excel filter menu contains a checkbox list with distinct column values from which the end user can choose a filter. It also has options such as sort, clear filter, and submenus for advanced filtering. Find the demo link here.

Excel Filtering in Angular Gantt Chart

What's New in Essential JS 2 Angular Image Editor | Syncfusion

Image Editor (Preview)

The Image Editor is a UI component that provides built-in support to edit images through APIs and the UI.

Key features

  • Selection: Select a region with a square or circle, using various aspect ratios, and drag and resize the selection.
  • Crop: The image can be cropped based on the selection.
  • Rotate: The image can be rotated both clockwise and counterclockwise by 90 degrees.
  • Flip: The image can be flipped both horizontally and vertically.
  • Zoom: The image can be zoomed in and out.
  • Pan: The entire image can be viewed by toggling the pan option from the toolbar.
  • Freehand drawing: Perform freehand drawing on the image and adjust the stroke width and color.
  • Annotations: The Image Editor support text, rectangles, ellipses, and line shapes for annotation.
  • Save: Save the edited image in JPEG, PNG, and SVG formats.
  • Reset: Revert all the edited states and load the original image.

Angular Image Editor Component Demo

What's New for Essential Angular Message | Syncfusion

Message (preview)

The Angular Message component lets users convey message urgency using differentiating icons and colors to denote the importance and context of the message to the end user. It has predefined Normal, Success, Info, Warning, and Error severity types.

The component can be displayed with predefined Text, Outlined, and Filled appearance variants.

Message comes with several built-in, customizable, SASS-based themes: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast.

Angular Message Component Demo

Angular Message component.

What's New for Essential JS 2 Angular Pivot Table | Syncfusion

Pivot Table

Paging

The paging support allows you to break and display large amounts of data page by page, improving the overall rendering performance of the pivot table. In addition, built-in navigation buttons are available to move between pages and to change the page size at runtime. Find the demo link here.

Display large amounts of data page by page in Angular Pivot Table.

What's New for Essential Angular Rich Text Editor | Syncfusion

Rich Text Editor

Insert audio and video

Insert audio and video files from a local folder or web URL or embed a URL from sources such as YouTube or Vimeo. Preview a video, resize it, and customize it using the quick toolbar. Find the demo link here.

@Mention integration

Easily integrate the @mention feature into the Rich Text Editor to display a suggestion list of items that users can select or tag. Once the user types the @ character in the editor, the suggestion list is shown and the user can select or tag a value from it. Find the demo link here.

Mention integration

What's New for Angular Schedule Component | Syncfusion

Scheduler

Virtual scrolling in vertical views

This feature allows users to load only the visible items in the view port and load the remaining items on scrolling. This improves the Scheduler component’s performance while loading a large number of resources and appointments in vertical day, week, and month views. Find the demo link here.

Angular Scheduler virtual scrolling

Template support in year view

Users can customize all the cells in the year view. Find the demo link here.

Template support of year view in Angular Scheduler

What's New for Angular Skeleton Component | Syncfusion

Skeleton (Preview)

The Angular Skeleton component is a placeholder that animates a shimmer effect to let users know that the page`s content is currently loading. In other words, it simulates the layout of page content while loading the actual content. It supports wave, fade, and pulse animation effects.

Key features

  • Shapes: Supports Circle, Square, Text, and Rectangle shapes.
  • Shimmer effect: Supports fade and pulse shimmer effects.

Angular Skeleton Component Demo

Angular Skeleton

What's New for Angular Speed Dial Component | Syncfusion

Speed Dial (Preview)

The Angular Speed Dial component is an extension of the floating action button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for the page.

Key features

  • Display mode: Display action buttons in linear and radial directions.
  • Positioning: Place the Speed Dial button in various built-in positions on the target element.
  • Modal: Show a modal overlay behind the Speed Dial.
  • Template: Customize the action items and Speed Dial popup container.

Angular Speed Dial Component Demo

Angular Speed Dial

What's New for Essential Angular TreeGrid | Syncfusion

Tree Grid

Inline editing with virtualization

Allows users to do CRUD operations such as add, edit, and delete directly on rows which are in current viewport when row and column virtualization features are enabled. Find the demo link here.

Inline editing with virtualization in Angular Tree Grid

Frozen columns with virtualization

Users can freeze specific columns while scrolling through other columns in a tree grid with row and column virtualization features enabled. Find the demo link here.

Frozen columns with virtualization in Angular Tree Grid

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon