Modify table content with buttons in Angular

Modify table content with buttons in Angular

Posted by: baliddim on 23 April 2019, 1:26 pm EST

• 

  baliddim

  • Post Options:
  • Link
    Copy

  Posted 23 April 2019, 1:26 pm EST

  Hi,

  I I have a simple excel import/export site written with Angular.

  See the screenshot below:
  
  https://ibb.co/B63cB7c

  I wanna do some calculations and formating over buttons and self written functions, e.g. the button ‘Do some magic’

  I have a function

  doThings(args) {
      const self = this;
      self.spread = args.spread;
      const sheet = self.spread.getActiveSheet();
      // sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
      // sheet.getCell(1, 1).backColor('blue');
      console.log(args);
    }
  

  but I get errors when pressing it.

  ERROR TypeError: Cannot read property 'spread' of undefined
      at ImportExportComponent.push../src/app/import-export/import-export.component.ts.ImportExportComponent.doThings (import-export.component.ts:61)
      at Object.eval [as handleEvent] (ImportExportComponent.html:15)
      at handleEvent (core.js:23107)
      at callWithDebugContext (core.js:24177)
      at Object.debugHandleEvent [as handleEvent] (core.js:23904)
      at dispatchEvent (core.js:20556)
      at core.js:21003
      at HTMLButtonElement.<anonymous> (platform-browser.js:993)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
      at Object.onInvokeTask (core.js:17290)
  

  Has anybody sample code, how I cen get access to the workbook over a function and do cell manipulations and formatting?

  Thanks in advance!

  BR

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 April 2019, 9:04 am EST

  Hi,

  You could use the workbookInitialized event to get the spread instance and save it. Then use the saved instance to perform required actions.
  
  Please refer to the following code snippet and attached sample:

  // in component's html
  <gc-spread-sheets (workbookInitialized)="workbookInit($event)">
  </gc-spread-sheets>
  <button (click)="changeBackground(spread)">change background color</button>
  
  // in component's ts file
   workbookInit(args) {
      var self = this;
      // save for later use
      self.spread = args.spread;
    }
  
  changeBackground(spread){
      if(!spread){
        return;
      }
  
      spread.suspendPaint();
      let sheet = spread.getActiveSheet();
      sheet.getRange(0, 0, 10, 10).backColor('orange');
      spread.resumePaint();
    }
  

  Regards
  
  spread-sheets-excelio-angular.zip