How To Add Synfusion Spreadsheet component In Angular Application

In this article, we will learn how to add Syncfusion Spreadsheet component in the Angular  application.

Prerequisites

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Node and NPM installed
• Bootstrap

Create an Angular Project

Create an Angular project by using the following command,

ng new rdata

Open this project in Visual Studio Code install the Syncfusion Spreadsheet  library, To install, use the following command,

npm install @syncfusion/ej2-spreadsheet

Now  install Bootstrap by using the following command,

npm install bootstrap --save

Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';  

Now import dropdown module in app.module.ts file, add the following code in this file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule,
    ReactiveFormsModule,
    SpreadsheetAllModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now create a new component by using the following command,

ng g c home

Now open home.component.ts file and add the following code,

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { getDefaultData } from '../data';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

empdata= 
  [
    {
        Id: "100",
        Name: "Sanwar",
        Age: "25",
        Address: "Jaipur",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",

    },
    {
        Id: "2",
        Name: "Nisha",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "3",
        Name: "David",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "4",
        Name: "Sam",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "5",
        Name: "Jyotsna",
        Age: "25",
        Address: "C-Scheme",
        City: "Mumbai",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "6",
        Name: "Sid",
        Age: "25",
        Address: "C-Scheme",
        City: "Bangalore",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "7",
        Name: "Chavi",
        Age: "25",
        Address: "C-Scheme",
        City: "Noida",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "8",
        Name: "Nisha",
        Age: "25",
        Address: "C-Scheme",
        City: "Delhi",
        Salary: "500000",
        Department: "IT",
    }
]

 constructor(){
 
 }
 @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    public data: Object[] = this.empdata;

    created() {
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'E31:F31');
        this.spreadsheetObj.cellFormat({ textAlign: 'right' }, 'E31');
        this.spreadsheetObj.numberFormat('$#,##0.00', 'F2:F31');
    }
  ngOnInit(): void {
  }
}

Now open home.component.home  file and add the following lines,

<div class="container" style="margin-top:10px;margin-bottom: 24px;">    
  <div class="col-sm-12 btn btn-info">    
    How To Add Synfusion Spreadsheet component In Angular Application  
  </div>    
</div>
<div class="control-section">
  <ejs-spreadsheet #default  (created)="created()">
      <e-sheets>
          <e-sheet name="Employee List Report">
              <e-ranges>
                  <e-range [dataSource]="data"></e-range>
              </e-ranges>
              <e-rows>
                  <e-row [index]="30">
                      <e-cells>
                          <e-cell [index]="4" value="Total Salary:"></e-cell>
                          <e-cell formula="=SUM(F2:F30)"></e-cell>
                      </e-cells>
                  </e-row>
              </e-rows>
              <e-columns>
                  <e-column ></e-column>
                  <e-column [width]=130></e-column>
                  <e-column [width]=130></e-column>
                  <e-column [width]=180></e-column>
                  <e-column [width]=130></e-column>
                  <e-column [width]=120></e-column>
              </e-columns>
          </e-sheet>
      </e-sheets>
  </ejs-spreadsheet>
</div>

Now open app.component.html file and add the following code,

<app-home></app-home>

Now run the application using npm start and check the result.

we can also differenct style to the spreadsheet, add the following code in home.component.ts file to change background color of headings.

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { getDefaultData } from '../data';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

empdata= 
  [
    {
        Id: "100",
        Name: "Sanwar",
        Age: "25",
        Address: "Jaipur",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",

    },
    {
        Id: "2",
        Name: "Nisha",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "3",
        Name: "David",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "4",
        Name: "Sam",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "5",
        Name: "Jyotsna",
        Age: "25",
        Address: "C-Scheme",
        City: "Mumbai",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "6",
        Name: "Sid",
        Age: "25",
        Address: "C-Scheme",
        City: "Bangalore",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "7",
        Name: "Chavi",
        Age: "25",
        Address: "C-Scheme",
        City: "Noida",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "8",
        Name: "Nisha",
        Age: "25",
        Address: "C-Scheme",
        City: "Delhi",
        Salary: "500000",
        Department: "IT",
    }
]
 constructor(){
 }
 @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    public data: Object[] = this.empdata;
    created() {
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor:"red", verticalAlign: 'middle' }, 'A1:F1');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'E31:F31');
        this.spreadsheetObj.cellFormat({ textAlign: 'right' }, 'E31');
      
    }
  ngOnInit(): void {
  } 
}

Now run the application and check the result.

Summary

In this article, we learned how to add Syncfusion Spreadsheet component in the Angular application