LuckySheet is one of the popular Spread Sheet like excel which is completely open source. Though integrating a LuckySheet in an Angular 13+ application is straight forward as per their official documentation in most parts, we need to change few things to make it work with an Angular application. In this post we will see how to integrate it with an Angular 13+ application.

Step 1:

Create an Angular application using angular cli

ng new angularluckysheet

You can give any name for your application or even work with an existing application as per your need.

Step 2:

Add LuckySheet dependencies to your index.html file

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

If you do not want to depend on the CDN, then you can install the necessary CSS and JS file through npm and add them to your angular configuration file.

Step 3:

Add an element which displays the LuckySheet in the ui. In our angular application, we can add this to the app.component.html file

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

Step 4:

Now, we need to initialize the LuckySheet. This is where we need to do few things in angular way in-order to make it work properly. If you see the official documentation, the script that we need to run is

$(function () {
        //Configuration item
        var options = {
            container: 'luckysheet' //luckysheet is the container id
        }
        luckysheet.create(options)
    })

if we run the application using Vanilla JavaScript, the $ and luckysheet variables in the above code will become available from the js files we imported from the cdn. If you try to run the code inside the component, we get error messages cannot find the name $ and similar error we get for luckysheet also.

Once when the scripts were executed, the $ and luckysheet will be available on the global window object. To access this global window object, we can create a service like this

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

function _window(): any {
    return window;
  }

@Injectable({providedIn: 'root'})
export class WindowService {
    constructor(@Inject(PLATFORM_ID) private platformId: object) { }

  get nativeWindow(): any {
    if (isPlatformBrowser(this.platformId)) {
      return _window();
    }
  }
    
}

Now, we can inject this service in the app component and access the global window using the getter method in the service nativeWindow.

app component ts

import { Component } from '@angular/core';
import { WindowService } from './window.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularluckysheet';
  constructor(private windowService: WindowService ) {}
  ngOnInit(): void {    
  }

  ngAfterViewInit() {
    let nativeWindow = this.windowService.nativeWindow;
    nativeWindow.$(function () {
      //Configuration item
      var options = {
          container: 'luckysheet' //luckysheet is the container id
      }
      nativeWindow.luckysheet.create(options)
  })
  }
}

In the above code, we have assigned this.windowService.nativeWindow into another variable nativeWindow. The reason being, inside the function which was passed to $, the this object may not point to the this of the component.

With the above code in place, the output will be something like this