Merge pull request #4 from DevExpress-Examples/Angular-example

Angular example
DevExpress-Examples · Jan 26, 2024 · a9f9574 · a9f9574
2 parents aff0100 + a486d8a
commit a9f9574
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 21 deletions.
diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html
@@ -1,3 +1,24 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
-</div>
+<dx-date-box
+  [value]="now"
+  type="date"
+  [width]="400"
+  label="Date with the short year"
+  [displayFormat]="format"
+>
+</dx-date-box>
+<dx-data-grid
+  id="grid"
+  [dataSource]="employees"
+  [width]="400"
+  keyExpr="ID"
+  [showBorders]="true"
+>
+  <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
+  <dxi-column dataField="FirstName"></dxi-column>
+  <dxi-column dataField="LastName"></dxi-column>
+  <dxi-column
+    dataField="BirthDate"
+    dataType="date"
+    [editorOptions]="editorOptions"
+  ></dxi-column>
+</dx-data-grid>
diff --git a/Angular/src/app/app.component.scss b/Angular/src/app/app.component.scss
@@ -1,4 +1,9 @@
-.default-style {
-  margin: 50px;
+.demo-container {
+  margin: 100px;
   width: 90vh;
 }
+
+
+#grid {
+  margin-top: 50px;
+}
diff --git a/Angular/src/app/app.component.spec.ts b/Angular/src/app/app.component.spec.ts
@@ -20,12 +20,6 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should have as title \'angular-test\'', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-test');
-  });
-
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();

diff --git a/Angular/src/app/app.component.ts b/Angular/src/app/app.component.ts
@@ -1,20 +1,29 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { Format } from 'devextreme/localization';
+import { formatter, parser } from '../utils';
+import { Employee, Service } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  providers: [Service],
 })
 export class AppComponent {
-  title = 'Angular';
+  employees: Employee[];
 
-  counter = 0;
+  now: Date = new Date();
 
-  buttonText = 'Click count: 0';
+  format: Format = {
+    parser: (val) => parser(val),
+    formatter: (val) => formatter(val),
+  };
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  editorOptions = {
+    displayFormat: this.format,
+  };
+
+  constructor(service: Service) {
+    this.employees = service.getEmployees();
   }
 }
diff --git a/Angular/src/app/app.module.ts b/Angular/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxDateBoxModule, DxDataGridModule } from 'devextreme-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +11,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxDateBoxModule,
+    DxDataGridModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/Angular/src/app/app.service.ts b/Angular/src/app/app.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+export interface Employee {
+  ID: number;
+
+  FirstName: string;
+
+  LastName: string;
+
+  Prefix: string;
+
+  Position: string;
+
+  BirthDate: string;
+
+  HireDate: string;
+
+  Address: string;
+}
+
+const employees: Employee[] = [{
+  ID: 1,
+  FirstName: 'John',
+  LastName: 'Heart',
+  Prefix: 'Mr.',
+  Position: 'CEO',
+  BirthDate: '1964/03/16',
+  HireDate: '1995/01/15',
+  Address: '351 S Hill St.',
+}, {
+  ID: 2,
+  FirstName: 'Olivia',
+  LastName: 'Peyton',
+  Prefix: 'Mrs.',
+  Position: 'Sales Assistant',
+  BirthDate: '1981/06/03',
+  HireDate: '2012/05/14',
+  Address: '807 W Paseo Del Mar',
+}];
+
+@Injectable()
+export class Service {
+  getEmployees(): Employee[] {
+    return employees;
+  }
+}
diff --git a/Angular/src/index.html b/Angular/src/index.html
@@ -8,6 +8,7 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
+    <div class="demo-container"></div>
     <app-root></app-root>
   </body>
 </html>
diff --git a/Angular/src/main.ts b/Angular/src/main.ts
@@ -3,4 +3,5 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule)
+// eslint-disable-next-line no-console
   .catch((err) => console.error(err));
diff --git a/Angular/src/utils.ts b/Angular/src/utils.ts
@@ -0,0 +1,11 @@
+export function parser(value: string): Date | number {
+  const parts = value.split('/');
+  if (parts.length !== 3) return Date.parse(value);
+  let year = Number(parts[2]);
+  if (year < 100) year += 2000;
+  return new Date(year, Number(parts[0]) - 1, Number(parts[1]));
+}
+
+export function formatter(value: number | Date): string {
+  return typeof value !== 'number' ? value.toLocaleDateString() : '';
+}
diff --git a/README.md b/README.md
@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/744047123/23.2.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1211517)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->