Syncfusion AI Assistant

How can I help you?

Getting Started with Angular Spreadsheet component

27 Apr 20263 minutes to read

This section explains how to create a simple Angular application and add the Syncfusion® Angular Spreadsheet component with the minimum required setup.

Prerequisites

System requirements for Syncfusion® Angular components

Create an Angular application

Use Angular CLI to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment.

Install Angular CLI globally, using the following command:

npm install -g @angular/cli

Create a new Angular application using the following commands:

ng new spreadsheet-app
cd spreadsheet-app

Install the Syncfusion® Angular Spreadsheet package

The Angular Spreadsheet package uses the Ivy library distribution format and is compatible with Angular 12 and above. Use the following command to install the package:

npm install @syncfusion/ej2-angular-spreadsheet --save

For Angular versions below 12, use the legacy ngcc package instead:

npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save

Add CSS references

Add the following style references to the [src/styles.css] file.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';

Note: Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in an Angular project.

Add the Syncfusion® Angular Spreadsheet component to the application

Now, import the required Spreadsheet module into your application file and render the component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
import { Component } from '@angular/core';

@Component({
imports: [
        SpreadsheetAllModule
    ],

standalone: true,
    selector: 'app-root',
    template: '<ejs-spreadsheet openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open" saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"></ejs-spreadsheet>'
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: The openUrl and saveUrl endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the link.

Run the application

Run the following command to start the development server:

ng serve

After the application starts, open the local URL shown in the terminal to view the Angular Spreadsheet component in the browser.

Use the following live preview to explore the Spreadsheet component.

Video tutorial

To get started quickly with Angular Spreadsheet, you can watch this video:

See also