Fix: Angular implementation, lint, and build to v25.1.3

Author: charlescordialDevExpress

Angular/package-lock.json

@@ -1,3 +1,21 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
-</div>
+<dx-data-grid
+  [dataSource]="employees"
+  (onEditorPreparing)="onEditorPreparing($event)">
+  <dxo-editing
+    [allowUpdating]="true"
+    [allowAdding]="true">
+  </dxo-editing>
+
+  <dxi-column
+    caption="Name"
+    dataField="CustomerID"
+    [setCellValue]="setCellValue">
+    <dxo-lookup
+      [dataSource]="customers"
+      valueExpr="CustomerID"
+      displayExpr="CustomerName">
+    </dxo-lookup>
+  </dxi-column>
+  <dxi-column dataField="Address"></dxi-column>
+  <dxi-column dataField="Phone"></dxi-column>
+</dx-data-grid>

Angular/src/app/app.component.html

@@ -1,20 +1,40 @@
-import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import type { Customer, Employee } from './types';
+import { DxDataGridComponent, type DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import type { ValueChangedEvent } from 'devextreme/ui/lookup';
+import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'Angular';
+export class AppComponent implements OnInit {
+  @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent<Employee, number>;
+  employees: Employee[] = [];
+  customers: Customer[] = [];
 
-  counter = 0;
+  constructor(private service: AppService) {}
 
-  buttonText = 'Click count: 0';
+  ngOnInit(): void {
+    this.employees = this.service.getEmployees();
+    this.customers = this.service.getCustomers();
+  }
+
+  onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent<Employee, number>): void {
+    if (e.parentType === 'dataRow' && e.dataField === 'CustomerID') {
+      e.editorOptions.onValueChanged = (ev: ValueChangedEvent): void => {
+        const selectedItem = ev.component.option('selectedItem') as Customer;
+        if (!selectedItem || !e.setValue) return;
+        e.setValue(selectedItem);
+      };
+    }
+  }
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  setCellValue(rowData: Employee, value: Customer): void {
+    if (!rowData || !value) return;
+    rowData.CustomerID = value.CustomerID;
+    rowData.Address = value.Address;
+    rowData.Phone = value.Phone;
   }
 }

Angular/src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxDataGridModule } from 'devextreme-angular/ui/data-grid';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { AppService } from './app.service';
 
 @NgModule({
   declarations: [
@@ -11,9 +12,9 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxDataGridModule,
   ],
-  providers: [],
+  providers: [AppService],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

Angular/src/app/app.module.ts

@@ -0,0 +1,122 @@
+import { Injectable } from '@angular/core';
+import type { Customer, Employee } from './types';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppService {
+    getEmployees(): Employee[] {
+        return [
+            { ID: 1, CustomerID: 1, Address: "Markušica", Phone: "+385 674 958 1641" },
+            { ID: 2, CustomerID: 2, Address: "Itaberaí", Phone: "+55 491 329 4084" },
+            { ID: 3, CustomerID: 3, Address: "Volgograd", Phone: "+7 745 619 7799" },
+            { ID: 4, CustomerID: 4, Address: "Shuiyin", Phone: "+86 774 746 9874" },
+            { ID: 5, CustomerID: 5, Address: "Baturaden", Phone: "+62 113 149 9397" },
+            { ID: 6, CustomerID: 6, Address: "New York City", Phone: "+1 917 528 7751" },
+            { ID: 7, CustomerID: 7, Address: "Adolfo Lopez Mateos", Phone: "+52 626 244 6757"},
+            { ID: 8, CustomerID: 8, Address: "Nong Khae", Phone: "+66 326 375 8694" },
+            { ID: 9, CustomerID: 9, Address: "Znamenskoye", Phone: "+7 926 141 2517" },
+            { ID: 10, CustomerID: 10, Address: "Patpata Segundo", Phone: "+63 428 750 7737" },
+            { ID: 11, CustomerID: 11, Address: "Fontanka", Phone: "+380 557 509 4191" },
+            { ID: 12, CustomerID: 12, Address: "Novosil'", Phone: "+7 493 632 2768" },
+            { ID: 13, CustomerID: 13, Address: "Ubinskoye", Phone: "+7 954 353 8930" },
+            { ID: 14, CustomerID: 14, Address: "Protvino", Phone: "+7 386 362 2407" },
+            { ID: 15, CustomerID: 15, Address: "Santa Fé do Sul", Phone: "+55 867 691 7097" }
+        ];
+    }
+
+    getCustomers(): Customer[] {
+        return [
+            {
+                CustomerID: 1,
+                CustomerName: "Kaela Phonix",
+                Address: "Markušica",
+                Phone: "+385 674 958 1641"
+            },
+            {
+                CustomerID: 2,
+                CustomerName: "Dotty Hearnden",
+                Address: "Itaberaí",
+                Phone: "+55 491 329 4084"
+            },
+            {
+                CustomerID: 3,
+                CustomerName: "Alasdair Greenin",
+                Address: "Volgograd",
+                Phone: "+7 657 495 7659"
+            },
+            {
+                CustomerID: 4,
+                CustomerName: "Stoddard Laidlaw",
+                Address: "Shuiyin",
+                Phone: "+86 774 746 9874"
+            },
+            {
+                CustomerID: 5,
+                CustomerName: "Damiano Gencke",
+                Address: "Baturaden",
+                Phone: "+62 113 149 9397"
+            },
+            {
+                CustomerID: 6,
+                CustomerName: "Aura Bavidge",
+                Address: "New York City",
+                Phone: "+1 917 528 7751"
+            },
+            {
+                CustomerID: 7,
+                CustomerName: "Emmanuel Chedgey",
+                Address: "Adolfo Lopez Mateos",
+                Phone: "+52 626 244 6757"
+            },
+            {
+                CustomerID: 8,
+                CustomerName: "Clerkclaude Pargeter",
+                Address: "Nong Khae",
+                Phone: "+66 326 375 8694"
+            },
+            {
+                CustomerID: 9,
+                CustomerName: "Onfroi Cinnamond",
+                Address: "Znamenskoye",
+                Phone: "+7 926 141 2517"
+            },
+            {
+                CustomerID: 10,
+                CustomerName: "Madlin Kopke",
+                Address: "Patpata Segundo",
+                Phone: "+63 428 750 7737"
+            },
+            {
+                CustomerID: 11,
+                CustomerName: "Mortie Feary",
+                Address: "Fontanka",
+                Phone: "+380 557 509 4191"
+            },
+            {
+                CustomerID: 12,
+                CustomerName: "Colet Haitlie",
+                Address: "Novosil'",
+                Phone: "+7 493 632 2768"
+            },
+            {
+                CustomerID: 13,
+                CustomerName: "Pippy Carnell",
+                Address: "Ubinskoye",
+                Phone: "+7 954 353 8930"
+            },
+            {
+                CustomerID: 14,
+                CustomerName: "Arvie Midden",
+                Address: "Protvino",
+                Phone: "+7 386 362 2407"
+            },
+            {
+                CustomerID: 15,
+                CustomerName: "Brook Kamena",
+                Address: "Santa Fé do Sul",
+                Phone: "+55 867 691 7097"
+            }
+        ];
+    }
+}