All Components

Using with Electron

You can use the Kendo UI for Angular components in a standalone Angular application or in an Angular project which is integrated with a different technology or framework such as Electron.

Overview

The most common approach for integrating Angular applications with Electron projects is to build and serve the Angular application, and use the Electron BrowserWindow control to load it. For more information and sample templates, refer to online resources such as Angular 5 Electron Tutorial and Build Angular Desktop Apps With Electron.

function createWindow() {
  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // Create the menu.
  setMainMenu();

  // Create the browser window.
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height
  });

  if (serve) {
    require('electron-reload')(__dirname, {
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  win.webContents.openDevTools();

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store the window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

Sample Project

The sample project is based on this Electron-integrated Angular template by Maxime Gris.

Once the base template is properly installed, you can seamlessly add the Kendo UI for Angular components and styles to the Angular application by following the instructions in the article on getting started. For more information on installing each Kendo UI for Angular package, refer to the Installation sections of their respective Overview articles—for example, Kendo UI for Angular Grid package or Kendo UI for Angular DropDowns package.

To build the sample project:

  1. Follow the installation instructions in the GitHub repository of the base template.
  2. Add the styles.

    1. Install the Kendo UI theme.

      npm install --save @progress/kendo-theme-bootstrap
    2. Import the theme in the styles.scss file.

      @import '~@progress/kendo-theme-bootstrap/scss/all';
  3. Install the Kendo UI for Angular components.

  4. Create the Dashboard application by using services, pipes, routing, and all other elements of a regular standalone Angular application.
  5. Load the Angular Dashboard application in the Electron BrowserControl as previously described.
  6. Customize the Menu.

    import { app, BrowserWindow, screen, Menu } from 'electron';
    
    function setMainMenu() {
    const template = [{
       label: isWindows ? 'Kendo UI' : app.getName(),
       submenu: [{
       label: isWindows ? 'Exit Kendo UI Dashboard' : `Quit ${app.getName()}`,
       accelerator: isWindows ? 'Alt+F4' : 'CmdOrCtrl+Q',
       click() {
           app.quit();
       }
       }]
    }];
    
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
    }
    
    function createWindow() {
    
    const electronScreen = screen;
    const size = electronScreen.getPrimaryDisplay().workAreaSize;
    
    // Create the menu
    setMainMenu();
    ...
In this article