Modify table content with buttons in Angular

Posted by: baliddim on 23 April 2019, 4:26 am EST

  • Posted 23 April 2019, 4:26 am 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
  • Replied 24 April 2019, 12: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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels