How to render Angular Spreadsheet with material theme?

This article 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

[src/app/app.module.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. 

[app.component.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 on a development server

Use the following command to run the application in the 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

We hope you enjoyed learning about how to render Angular Spreadsheet with a 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, BoldDesk Support, or feedback portal. We are always happy to assist you!