Getting Started With Luckysheet in Angular

getting started , angular

LuckySheet is a powerful spreadsheet-like web component that allows you to create, edit, and manipulate data in a tabular format. When integrated with Angular, LuckySheet becomes even more versatile, enabling you to build dynamic and interactive applications with ease. In this guide, we'll walk through the steps of getting started with LuckySheet in an Angular project.

What is LuckySheet?

LuckySheet is an open-source web-based spreadsheet application developed using JavaScript. It provides functionalities similar to Excel or Google Sheets, allowing users to input and analyze data in a grid-like interface. LuckySheet supports various features such as formulas, formatting, data validation, and collaborative editing.

Setting Up an Angular Project

Before we dive into integrating LuckySheet, let's set up a new Angular project if you haven't already:

Install Angular CLI: If you haven't installed Angular CLI yet, you can do so by running the following command:

npm install -g @angular/cli

Create a New Angular Project: Create a new Angular project using Angular CLI:

ng new my-luckysheet-app

Navigate to the Project Directory: Move into your project directory:

cd my-luckysheet-app

Installing LuckySheet or Add CDN in index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularFirebaseTodo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
  <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Next, let's install LuckySheet in our Angular project:

Install LuckySheet via npm: LuckySheet is available as an npm package. Install it using the following command:

npm i luckysheet

Integrating LuckySheet into Angular Component

Now that we have LuckySheet installed, let's integrate it into an Angular component:

Import LuckySheet Module: Open the component where you want to use LuckySheet and import the luckysheet module:
Initialize LuckySheet: Within your component class, initialize LuckySheet inside the ngOnInit method or any other suitable lifecycle hook:

import { Component, OnInit } from '@angular/core';
import * as luckysheet from 'luckysheet';
import { WindowService } from 'src/app/window.service';
@Component({
  selector: 'app-luckysheet',
  templateUrl: './luckysheet.component.html',
  styleUrls: ['./luckysheet.component.css']
})
export class LuckysheetComponent implements OnInit {
constructor(private windowService: WindowService) { }
ngOnInit(): void { }
  ngAfterViewInit() {
    setTimeout(() => {
      let nativeWindow = this.windowService.nativeWindow;
      nativeWindow.$(() => {
        this.configureLuckysheet();
      })
    }, 200);
  }


  private configureLuckysheet(): void {
        var options = {
      container: 'luckysheet', // luckysheet is the container id
      showinfobar: false,
    }


    luckysheet.create(options);
  }


}

Let's add Window.Service.ts. Adding WindowService for Global Access

Sometimes, you may need to access the global window object in your Angular components, especially when dealing with browser- specific functionality or third-party libraries that rely on it. To safely access the window object, we can create a service called WindowService

The WindowService checks whether the Angular application is running in a browser environment before providing access to the global window object. This ensures that your application remains platform-independent and avoids errors when running on server-side environments.

In your Angular components, you can inject the WindowService and use its nativeWindow property to access the window object safely.

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();
    }
  }
    
}

HTML Template: In your component's HTML template, add an element with the specified ID where LuckySheet will be rendered:

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

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

Running the Angular Application

Finally, let's run our Angular application to see LuckySheet in action:

Start the Development Server: Run the following command to start the development server:

ng serve --open

View LuckySheet in Browser: Open your web browser and navigate to http://localhost:4200 (or another port if configured differently) to see LuckySheet embedded within your Angular application.

Congratulations! You've successfully integrated LuckySheet into your Angular project. This powerful spreadsheet component opens up a world of possibilities for building data-driven web applications in Angular. Experiment with its various features, explore the documentation, and unleash the full potential of LuckySheet in your projects. Happy coding!

getting started , angular

Categories

Follow us