How to render Angular Spreadsheet with material theme?
This Document explains how to create Essential JavaScript 2 Spreadsheet sample in Angular Spreadsheet with default material theme.
Setting up new Angular project
You can use Angular CLI to setup your Angular applications.
Install the CLI application globally in your machine by using the below command.
npm install -g @angular/cli
Create a new application called “angular-spreadsheet”.
ng new angular-spreadsheet
Navigate to the created project folder.
cd angular- spreadsheet
Installing Syncfusion package
Add Spreadsheet component package to the application by using the below command.
[TS]
npm install @syncfusion/ej2-angular-spreadsheet --save (or) npm i @syncfusion/ej2-angular- spreadsheet --save
Adding Spreadsheet module
After installing the package, the component modules are available to be configured in your application from the installed Syncfusion package.
Import Spreadsheet module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-spreadsheet [src/app/app.module.ts].
[TS]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,SpreadsheetAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Adding CSS reference
The following inbuilt material CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in “src/styles.css” using the following code.
[HTML]
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
Adding Syncfusion component
Add the spreadsheet component to “app.component.ts” as follows.
[TS]
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template:'<ejs-spreadsheet> <e-sheets> <e-sheet> <e-ranges> <e-range [dataSource]="data"> </e-range></e-ranges> </e-sheet> </e-sheets> </ejs-spreadsheet>'
})
export class AppComponent implements OnInit {
title = 'angularSpreadsheet';
public data: Object[] = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
}];
ngOnInit(): void {
this.data = this.data;
}
}
Running the application in a Development server
Use the following command to run the application in browser.
ng serve –open
The app will automatically reload if you change any of the source files.
Demo Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1540552435
Documentation Link: https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started
Conclusion
I hope you enjoyed learning about how to render Angular Spreadsheet with material theme.
You can refer to our Angular Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Spreadsheet example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
