Update projects

Author: AlisherAmonulloev

Angular/package-lock.json

@@ -24,6 +24,8 @@
     "@angular/router": "^18.0.3",
     "devextreme": "25.1.3",
     "devextreme-angular": "25.1.3",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.7"
@@ -32,7 +34,9 @@
     "@angular-devkit/build-angular": "^18.0.4",
     "@angular/cli": "~18.0.4",
     "@angular/compiler-cli": "^18.0.3",
+    "@types/file-saver": "^2.0.7",
     "@types/jasmine": "~4.3.0",
+    "@types/node": "^24.7.0",
     "eslint": "^8.39.0",
     "eslint-config-devextreme": "^1.1.4",
     "eslint-plugin-no-only-tests": "^3.1.0",

Angular/package.json

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+
+const dataSource = {
+  store: {
+    type: 'xmla',
+    url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
+    catalog: 'Adventure Works DW Standard Edition',
+    cube: 'Adventure Works',
+  },
+  fields: [{
+    dataField: '[Product].[Category]',
+    area: 'row',
+    sortBySummaryField: '[Measures].[Sales Amount]',
+    sortOrder: 'desc',
+  }, {
+    dataField: '[Product].[Subcategory]',
+    area: 'row',
+    sortBySummaryField: '[Measures].[Sales Amount]',
+    sortOrder: 'desc',
+  }, {
+    dataField: '[Ship Date].[Calendar Year]',
+    area: 'column',
+    filterValues: [['CY 2003'], ['CY 2004']],
+  }, {
+    dataField: '[Ship Date].[Month of Year]',
+    area: 'column',
+  }, {
+    dataField: '[Measures].[Sales Amount]',
+    area: 'data',
+    format: 'currency',
+  }, {
+    dataField: '[Measures].[Tax Amount]',
+    area: 'data',
+    format: 'currency',
+  }],
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdventureWorksService {
+  getPivotGridDataSource(): any {
+    return dataSource;
+  }
+}

Angular/src/app/adventureworks.service.ts

@@ -1,3 +1,13 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
-</div>
+<dx-pivot-grid
+  id="pivot-grid"
+  [dataSource]="dataSource"
+  [allowSorting]="true"
+  [allowSortingBySummary]="true"
+  [allowFiltering]="true"
+  (onExporting)="exportGrid($event)"
+>
+  <dxo-field-panel [visible]="true" [showFilterFields]="false">
+  </dxo-field-panel>
+  <dxo-field-chooser [allowSearch]="true"> </dxo-field-chooser>
+  <dxo-export [enabled]="true"> </dxo-export>
+</dx-pivot-grid>

Angular/src/app/app.component.html

@@ -1,4 +1,3 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
+#pivot-grid {
+  height: 70vh;
 }

Angular/src/app/app.component.scss

@@ -1,20 +1,27 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { AdventureWorksService } from './adventureworks.service';
+import type { PivotGridDataSource } from './app.types';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  providers: [AdventureWorksService],
 })
 export class AppComponent {
-  title = 'Angular';
+  title = 'Getting Started with DevExtreme Angular PivotGrid';
 
-  counter = 0;
+  dataSource: PivotGridDataSource;
 
-  buttonText = 'Click count: 0';
+  constructor(service: AdventureWorksService) {
+    this.dataSource = service.getPivotGridDataSource();
+  }
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  exportGrid(e: any): void {
+    // Export functionality can be implemented here
+    // For this example, we'll just prevent the default export
+    e.cancel = true;
+    // eslint-disable-next-line no-console
+    console.log('Export functionality can be implemented using DevExtreme export capabilities');
   }
 }

Angular/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxPivotGridModule } from 'devextreme-angular/ui/pivot-grid';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxPivotGridModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

Angular/src/app/app.module.ts

@@ -0,0 +1,4 @@
+export interface PivotGridDataSource {
+  store: any;
+  fields: any[];
+}