Angular Spreadsheet - Comprehensive, Flexible Excel Viewer
- Seamless data analysis and visualization like in Microsoft Excel.
- Compatibility with Microsoft Excel file formats.
- Highly intuitive user interfaces.
- An Excel-like interface with built-in ribbon interaction, selection, fill series, and more to help end users work with Excel files in applications.
Trusted by the world’s leading companies
Overview
The Angular Spreadsheet, an Angular Excel viewer, is a feature-rich component for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, and importing and exporting Excel documents.
Why choose the Syncfusion Angular Spreadsheet?
High performance
The Angular Spreadsheet is designed and optimized for loading large amounts of data into a worksheet and viewing it on demand with the help of row and column virtualization.
Seamless data binding
Bind data seamlessly from various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager.
Hassle-free formatting
Angular Spreadsheet allows users to format cells and numbers. It also allows conditional formatting to format a cell or range of cells based on the conditions applied.
Transform data to a chart
The chart feature transforms the Spreadsheet data into an intuitive visual for better understanding.
Wide range of built-in formulas
The Angular Spreadsheet library provides a wide range of formulas with cross-sheet reference support. Its rich UI comes with a built-in calculation engine that performs formula calculations.
Attractive, customizable themes
Cutting-edge design with built-in themes such as Fluent, Tailwind CSS, Material, Fabric, and more. Utilize the online Theme Studio tool to customize these themes easily.
Globalization and localization
Enable users from different locales to use the Spreadsheet by formatting dates, currency, and numbering to suit their preferences.
Angular Spreadsheet code example
Easily get started with the Angular Spreadsheet using a few simple lines of HTML and TS code, as demonstrated in the following example. Also, explore our Angular Spreadsheet example, which shows you how to render and configure a Spreadsheet in Angular.
<div class="control-section">
<ejs-spreadsheet>
<e-sheets>
<e-sheet>
<e-ranges>
<e-range [dataSource]='data'></e-range>
</e-ranges>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</div>import { Component, OnInit } from '@angular/core';
export class AppComponent implements OnInit {
public data: object[] = [];
ngOnInit(): void {
this.data = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCity: 'Reims' },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCity: 'Münster' },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCity: 'Lyon' }
];
}
}Worksheet
A worksheet is a collection of cells arranged in rows and columns that lets you save, format, and work with data. You can create, delete, and rename worksheets, as well as customize the headers, gridlines, and sheet visibility in our Angular Spreadsheet.
Work with cell ranges
A cell range refers to a set of cells in a sheet. Angular Spreadsheet supports several features for working with cell ranges.
Wrap text
You can display a large amount of content in multiple lines within a single cell by using text wrap.
Merge cells
Combine two or more cells from the same row or column into a single cell by merging them.
Data validation
Restrict the entry of wrong data by users with data validation. You can also highlight the incorrect data.
Autofill
The autofill option allows users to fill or copy a series or pattern of values and formats into adjacent cells in any direction.
Editing
Data editing allows you to add, edit, and remove formulas or values in a cell. Edit the contents of a cell directly in the cell or by typing in the formula bar.
Number formatting
Number formatting is used to change the appearance of numbers in Angular Spreadsheet. It helps display data as currency, percentages, short dates, long dates, time, fractions, and scientific numbers, similar to Excel.
Cell formatting
Using cell formatting, users can highlight a particular cell or range of cells from a whole workbook. The component supports various formatting options: font size, font family, font color, fill color, indent, and horizontal and vertical alignments of text.
Conditional formatting
Conditional formatting can format a cell or range of cells based on the conditions that are applied. This enables you to highlight data based on the appropriate condition.
Sort and filter
- Reorganize data faster by sorting the range of cells in either the ascending or descending order. The custom sort option allows you to sort multiple columns.
- When filtering, if values in one or more columns do not meet the filtering criteria, all the data will be hidden. You can filter text, dates, and numbers.
Images
The image feature allows users to view, insert, and modify a picture in a Angular Spreadsheet with customizing options.
Charts
The chart feature transforms the Spreadsheet data into an intuitive visual for better understanding.
Ribbon UI
The Angular Spreadsheet provides an interactive ribbon that organizes the spreadsheet’s features into a series of tabs. Collapse the ribbon to make more rows visible in the viewport.
Find and replace
You can use the Find and Replace option to search for content within a worksheet or workbook and then change out the original text for an alternative.
Freeze panes
The freeze panes allows users to keep specified rows and columns always visible at the top or left side of the sheet while scrolling through it.
Protection
- Encrypt workbooks with a password to prevent unauthorized users from opening them.
- Encrypt worksheets with a password and restrict user actions like editing, row and column resizing, inserting, and deleting.
Adaptive UI layout
The Angular Spreadsheet user interface has been customized and redesigned for great views and usability on small screens.
Interactive features
Copy to clipboard
Use the clipboard operations, cut, copy, and paste, just like in Microsoft Excel. You can paste the values or formulas with or without formatting in a newly selected range.
Undo and redo
The Angular Spreadsheet component provides options to undo and redo changes made in a workbook. You can customize the limit of undo and redo operations.
Context menu
The context menu improves user interaction with the Angular Spreadsheet using a pop-up menu. It appears when a cell, row header, column header, or sheet tab is right clicked.
Cell comments (notes)
The Spreadsheet component provides options to add, edit, and delete cell comments.
Smooth scrolling
The Angular Spreadsheet component provides a smooth scrolling experience even with many cells in a view.
Open and save
Excel and CSV import
Load Excel documents initially or open them like an Excel application with data accuracy, styles, and formats. Microsoft Excel (.xlsx), Microsoft Excel 97-2003 (.xls), and comma-delimited values (.csv) file formats can be opened in a Angular Spreadsheet.
Excel and CSV export
Easily save the Angular Spreadsheet component with data accuracy, styles, and formats as an Excel file. The Angular Material Spreadsheet supports file formats such as Microsoft Excel (.xlsx), Microsoft Excel 97-2003 (.xls), and comma-delimited values (.csv).
Accessibility
Keyboard navigation
The Angular Excel Spreadsheet ensures that every cell is accessible using a keyboard. Major features like selection, clipboard, and editing can be performed using keyboard commands alone, no mouse interaction required. This helps in creating highly accessible applications using this component.
Screen readers
The Angular Excel Spreadsheet has complete WAI-ARIA accessibility support. Its rich UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Right to left (RTL)
Right-to-left rendering allows you to display the text and layout of the Spreadsheet from right to left. This improves the user experience and accessibility for RTL languages.
Additional features
Touch-friendly and responsive
Spreadsheet recognizes touch gestures, allowing the user to swipe left or right to move the sheet. The responsive, mobile-friendly design provides the best user experience on all mobile phone, tablet, and desktop form factors.
Developer-friendly APIs
Developers can customize their UI and control its behaviors according to the end user’s requirement using the control’s rich set of client-side APIs.
With the Angular Spreadsheet control, you can print a single or multiple sheets of data easily.
Angular version compatibility
The Angular Spreadsheet is kept compatible with old and new versions of Angular starting from 4 to the latest version.
Excel-like user interface
10+ interactive demos
626K+ downloads
Other supported frameworks
The Spreadsheet is available for the React, JavaScript, Vue, ASP.NET Core, and ASP.NET MVC frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Angular Spreadsheet works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
Not sure how to create your first Angular Spreadsheet? Our documentation can help.
I’d love to read it nowFrequently Asked Questions
Why should you choose the Syncfusion Essential Studio® Angular Spreadsheet component?
The Syncfusion Angular Spreadsheet provides the following features:
- Seamless data analysis and visualization like in Microsoft Excel.
- Compatibility with Microsoft Excel file formats.
- Highly intuitive user interfaces.
Flexible data binding with support to use local and remote data source services.
Support for freeze panes, keyboard shortcuts and all the common Excel features.
- Supports all modern browsers.
- Touch-friendly and responsive UI.
Expansive learning resources such as demos and documentation let you get started quickly with the Angular Spreadsheet.
Where can I find the Syncfusion Angular Spreadsheet demo?
You can find our Angular Spreadsheet demo, which demonstrates how to render and configure the Spreadsheet.
Can I download and utilize the Syncfusion Angular Spreadsheet for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Angular Spreadsheet component?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P,
Customer Success Manager, Small-Business
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V,
CEO, Small-Business
Rated by users across the globe
Syncfusion Angular Spreadsheet Resources
UI Kits
Figma Download
Figma Download
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
