HelpBot Assistant

How can I help you?

Getting Started with Angular and Electron

3 Feb 20267 minutes to read

This guide explains how to build a basic Angular 19 application using a standalone component structure with the Electron framework and integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid component.

Prerequisites

Before getting started, ensure the following software is installed:

  • Angular version 17 or later
  • TypeScript version 5.4 or later
  • Electron CLI version 34.0.0 or later

If the Electron CLI is not installed, refer to the Electron package for installation instructions.

Set Up Angular Environment

Refer to the Setting up the local environment and workspace guide for Angular setup instructions.

Install the Electron framework with the following command:

npm install -g electron

Note: See the getting started guide to learn more about Electron installation.

Installing Syncfusion® Grid package

Syncfusion® packages are available on npm under the @syncfusion scope. Explore all Angular Syncfusion® packages here.

To install the Grid package, execute the following command:

npm install @syncfusion/ej2-angular-grids --save
# or
npm i @syncfusion/ej2-angular-grids --save

Adding Syncfusion® Grid Component

To integrate the Syncfusion® Grid component, update the template in app.component.ts by adding the ejs-grid element and binding it to the data variable.

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule, CommonModule],
  template: `
    <h1>Syncfusion Angular 19 Grid with Electron (Standalone)</h1>
    <ejs-grid [dataSource]="data">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width=90></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width=120></e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width=90></e-column>
        <e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width=120></e-column>
      </e-columns>
    </ejs-grid>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data: Object[] = [
    {
      OrderID: 10248,
      CustomerID: 'VINET',
      EmployeeID: 5,
      OrderDate: new Date(8364186e5),
      ShipName: 'Vins et alcools Chevalier',
      ShipCity: 'Reims',
      ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ',
      ShipPostalCode: '51100',
      ShipCountry: 'France',
      Freight: 32.38,
      Verified: true
    },
    {
      OrderID: 10249,
      CustomerID: 'TOMSP',
      EmployeeID: 6,
      OrderDate: new Date(836505e6),
      ShipName: 'Toms Spezialitäten',
      ShipCity: 'Münster',
      ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ',
      ShipPostalCode: '44087',
      ShipCountry: 'Germany',
      Freight: 11.61,
      Verified: false
    },
    {
      OrderID: 10250,
      CustomerID: 'HANAR',
      EmployeeID: 4,
      OrderDate: new Date(8367642e5),
      ShipName: 'Hanari Carnes',
      ShipCity: 'Rio de Janeiro',
      ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ',
      ShipPostalCode: '05454-876',
      ShipCountry: 'Brazil',
      Freight: 65.83,
      Verified: true
    }
  ];
}

Adding CSS References

To incorporate styles for the Grid component, add the following imports to styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';

Create main.js File

Create a main.js file in your project’s root directory and add the following code:

const { app, BrowserWindow } = require('electron');
const path = require('path');
let win;
function createWindow () {     
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 });
// Load the index.html of the app. 
win.loadFile(path.join(__dirname, 'dist', 'my-app', 'browser', 'index.html'));
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {       
   win = null;   
  })
};      
// This method will be called when Electron finish initialization and is ready to create browser windows.   
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => { 
  // On macOS, apps stay active until the user quits explicitly with Cmd + Q.
  if (process.platform !== 'darwin') {
    app.quit();
  }   
});

app.on('activate', () => {
  // On macOS, recreate a window when the dock icon is clicked if no other windows are open.
  if (win === null) {
    createWindow();
  }   
});

Update index.html

In /src/index.html, change <base href="/"> to <base href="./"> to ensure Electron locates the built Angular files correctly.

Update package.json

Modify package.json to include the main entry and update scripts:

{
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "electron-build": "ng build --configuration production",
    "electron": "electron ."
  }
}

Running the application

To build and launch the application, execute these commands sequentially:

npm run electron-build
npm run electron

The Syncfusion® Essential® JS 2 Grid component will render within the Electron window.

Note: For a complete example, see the Angular sample with Electron in GitHub.

See Also