chgc/app.component.ts

## app.component.ts
import 'rxjs/add/observable/from';

import {ApplicationRef, Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '用Angular寫Excel Addin!!';
  constructor(private appRef: ApplicationRef) {}

  clickMe() {
    // Run a batch operation against the Excel object model
    Observable
        .from(Excel.run((ctx) => {
          // Create a proxy object for the active worksheet
          const sheet: Excel.Worksheet =
              ctx.workbook.worksheets.getActiveWorksheet();

          if (sheet) {
            // Queue commands to set the report title in the worksheet
            sheet.getRange('A1').values = [['Quarterly Sales Report']];
            sheet.getRange('A1').format.font.name = 'Century';
            sheet.getRange('A1').format.font.size = 26;
          }

          // Create an array containing sample data
          const values = [
            ['Product', 'Qtr1', 'Qtr2', 'Qtr3', 'Qtr4'],
            ['Frames', 5000, 7000, 6544, 4377], ['Saddles', 400, 323, 276, 651],
            ['Brake levers', 12000, 8766, 8456, 9812],
            ['Chains', 1550, 1088, 692, 853], ['Mirrors', 225, 600, 923, 544],
            ['Spokes', 6005, 7634, 4589, 8765]
          ];

          // Queue a command to write the sample data to the specified range
          // in the worksheet and bold the header row
          const range = sheet.getRange('A2:E8');
          range.values = values;
          sheet.getRange('A2:E2').format.font.bold = true;

          // Queue a command to add a new chart
          const chart = sheet.charts.add('ColumnClustered', range, 'auto');

          // Queue commands to set the properties and format the chart
          chart.setPosition('G1', 'L10');
          chart.title.text = 'Quarterly sales chart';
          chart.legend.position = 'right'
          chart.legend.format.fill.setSolidColor('white');
          chart.dataLabels.format.font.size = 15;
          chart.dataLabels.format.font.color = 'black';
          const points = chart.series.getItemAt(0).points;
          points.getItemAt(0).format.fill.setSolidColor('pink');
          points.getItemAt(1).format.fill.setSolidColor('indigo');

          // Run the queued commands, and return a promise to indicate task
          // completion
          return ctx.sync();
        }))
        .subscribe(
            () => {
              this.appRef.tick();
              console.log('Success!');
            },
            error => {
            });
  }
}

## index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Ng2Excel</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>

<body>
  <app-root>Loading...</app-root>
</body>

</html>

## main.ts
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';

declare const Office: any;

Office.initialize = function() {
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
};

## ngExcelManifest.xml
<?xml version="1.0" encoding="UTF-8"?>
    <!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
    <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
      <Id>534a9c82-e492-4b03-a0df-7e6e97815039</Id>
      <Version>1.0.0.0</Version>
      <ProviderName>Microsoft</ProviderName>
      <DefaultLocale>en-US</DefaultLocale>
      <DisplayName DefaultValue="Angular App Sample" />
      <Description DefaultValue="Angular App Sample"/>
      <Capabilities>
        <Capability Name="Workbook" />
      </Capabilities>
      <DefaultSettings>
        <SourceLocation DefaultValue="https://localhost:4200" />
      </DefaultSettings>
      <Permissions>ReadWriteDocument</Permissions>
    </OfficeApp>
	import 'rxjs/add/observable/from';

	import {ApplicationRef, Component} from '@angular/core';
	import {Observable} from 'rxjs/Observable';

	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = '用Angular寫Excel Addin!!';
	constructor(private appRef: ApplicationRef) {}

	clickMe() {
	// Run a batch operation against the Excel object model
	Observable
	.from(Excel.run((ctx) => {
	// Create a proxy object for the active worksheet
	const sheet: Excel.Worksheet =
	ctx.workbook.worksheets.getActiveWorksheet();

	if (sheet) {
	// Queue commands to set the report title in the worksheet
	sheet.getRange('A1').values = [['Quarterly Sales Report']];
	sheet.getRange('A1').format.font.name = 'Century';
	sheet.getRange('A1').format.font.size = 26;
	}

	// Create an array containing sample data
	const values = [
	['Product', 'Qtr1', 'Qtr2', 'Qtr3', 'Qtr4'],
	['Frames', 5000, 7000, 6544, 4377], ['Saddles', 400, 323, 276, 651],
	['Brake levers', 12000, 8766, 8456, 9812],
	['Chains', 1550, 1088, 692, 853], ['Mirrors', 225, 600, 923, 544],
	['Spokes', 6005, 7634, 4589, 8765]
	];

	// Queue a command to write the sample data to the specified range
	// in the worksheet and bold the header row
	const range = sheet.getRange('A2:E8');
	range.values = values;
	sheet.getRange('A2:E2').format.font.bold = true;

	// Queue a command to add a new chart
	const chart = sheet.charts.add('ColumnClustered', range, 'auto');

	// Queue commands to set the properties and format the chart
	chart.setPosition('G1', 'L10');
	chart.title.text = 'Quarterly sales chart';
	chart.legend.position = 'right'
	chart.legend.format.fill.setSolidColor('white');
	chart.dataLabels.format.font.size = 15;
	chart.dataLabels.format.font.color = 'black';
	const points = chart.series.getItemAt(0).points;
	points.getItemAt(0).format.fill.setSolidColor('pink');
	points.getItemAt(1).format.fill.setSolidColor('indigo');

	// Run the queued commands, and return a promise to indicate task
	// completion
	return ctx.sync();
	}))
	.subscribe(
	() => {
	this.appRef.tick();
	console.log('Success!');
	},
	error => {
	});
	}
	}
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Ng2Excel</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">


	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
	<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
	<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
	<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
	</head>

	<body>
	<app-root>Loading...</app-root>
	</body>

	</html>
	import {enableProdMode} from '@angular/core';
	import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

	import {AppModule} from './app/app.module';
	import {environment} from './environments/environment';

	declare const Office: any;

	Office.initialize = function() {
	const platform = platformBrowserDynamic();
	platform.bootstrapModule(AppModule);
	};
	<?xml version="1.0" encoding="UTF-8"?>
	<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
	<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
	<Id>534a9c82-e492-4b03-a0df-7e6e97815039</Id>
	<Version>1.0.0.0</Version>
	<ProviderName>Microsoft</ProviderName>
	<DefaultLocale>en-US</DefaultLocale>
	<DisplayName DefaultValue="Angular App Sample" />
	<Description DefaultValue="Angular App Sample"/>
	<Capabilities>
	<Capability Name="Workbook" />
	</Capabilities>
	<DefaultSettings>
	<SourceLocation DefaultValue="https://localhost:4200" />
	</DefaultSettings>
	<Permissions>ReadWriteDocument</Permissions>
	</OfficeApp>