Merge pull request #4 from DevExpress-Examples/Angular

Add Angular

Angular/src/app/app.component.html

@@ -1,3 +1,17 @@
 <div class="default-style">
- <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+ <dx-number-box [width]="400" [format]="currencyFormat" valueChangeEvent="keyup" (onKeyDown)="onZeroKeyDown($event)"
+ label="zero-based format">
+ </dx-number-box>
+ <dx-number-box [width]="400" [format]="zeroFormat" valueChangeEvent="keyup" (onContentReady)="onContentReady($event)"
+ (onKeyDown)="onNonZeroKeyDown($event)" label="non-zero format">
+ </dx-number-box>
+ <dx-data-grid [dataSource]="dataSource" keyExpr="PaymentId" [showBorders]="true"
+ (onEditorPreparing)="onEditorPreparing($event)">
+ <dxi-column dataField="PaymentId" caption="Payment Id (non-zero format)" dataType="number" [width]="200"
+ [format]="nonZeroFormat" [editorOptions]="paymentIdEditorOptions"> </dxi-column>
+ <dxi-column dataField="Amount" caption="Amount (zero-based format)" dataType="number" [width]="200"
+ [format]="currencyFormat" [editorOptions]="amountEditorOptions"> </dxi-column>
+ <dxi-column dataField="PaymentDate" dataType="date"> </dxi-column>
+ <dxo-filter-row [visible]="true" applyFilter="auto"></dxo-filter-row>
+ </dx-data-grid>
 </div>

Angular/src/app/app.component.spec.ts

@@ -19,17 +19,4 @@ describe('AppComponent', () => {
  const app = fixture.componentInstance;
  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();
- const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('.content span')?.textContent).toContain('angular-test app is running!');
- });
 });

Angular/src/app/app.component.ts

@@ -1,20 +1,83 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+
+import { DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
+import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import dxNumberBox from 'devextreme/ui/number_box';
+
+import { PaymentInfo, Service } from './app.service';
+
+type CustomContentReadyEvent = DxNumberBoxTypes.ContentReadyEvent & {
+ component: ExtendedNumberBox;
+};
+type ExtendedNumberBox = dxNumberBox & {
+ isLoaded?: boolean;
+};
 
 @Component({
  selector: 'app-root',
+ providers: [Service],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
+
 })
+
 export class AppComponent {
- title = 'Angular';
+ nonZeroFormat = '##.######';
+
+ zeroFormat = '0#.######';
+
+ currencyFormat = '$ #,##0.##';
+
+ paymentIdEditorOptions;
+
+ amountEditorOptions;
+
+ dataSource: PaymentInfo[];
+
+ constructor(service: Service) {
+ this.paymentIdEditorOptions = {
+ format: this.nonZeroFormat,
+ };
+ this.amountEditorOptions = {
+ format: this.currencyFormat,
+ };
+ this.dataSource = service.getPayments();
+ }
+
+ onContentReady = (e: CustomContentReadyEvent): void => {
+ if (!e.component.isLoaded) {
+ e.component.isLoaded = true;
+ if (e.component.option('value') === 0) e.component.option('format', this.zeroFormat);
+ }
+ };
 
- counter = 0;
+ onNonZeroKeyDown = (e: DxNumberBoxTypes.KeyDownEvent): void => {
+ const value = e.component.option('value');
+ if (e.event?.key === '0' && value === null) {
+ e.component.option('format', this.zeroFormat);
+ } else if (e.event?.key === 'Backspace' && value === 0) {
+ e.component.option('format', '');
+ } else if (value != null && (value > -1 && value < 1)) {
+ e.component.option('format', this.zeroFormat);
+ } else {
+ e.component.option('format', this.nonZeroFormat);
+ }
+ };
 
- buttonText = 'Click count: 0';
+ onZeroKeyDown = (e: DxNumberBoxTypes.KeyDownEvent): void => {
+ if (e.event?.key === 'Backspace' && e.component.option('value') === 0) {
+ e.component.option('format', '');
+ } else {
+ e.component.option('format', this.currencyFormat);
+ }
+ };
 
- onClick(e: ClickEvent): void {
- this.counter++;
- this.buttonText = `Click count: ${this.counter}`;
+ onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent): void {
+ if (e.parentType !== 'filterRow') return;
+ if (e.dataField === 'PaymentId') {
+ e.editorOptions.onContentReady = this.onContentReady;
+ e.editorOptions.onKeyDown = this.onNonZeroKeyDown;
+ }
+ if (e.dataField === 'Amount') e.editorOptions.onKeyDown = this.onZeroKeyDown;
  }
 }

Angular/src/app/app.module.ts

@@ -1,6 +1,7 @@
 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 { DxNumberBoxModule } from 'devextreme-angular/ui/number-box';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +12,8 @@ import { AppComponent } from './app.component';
  imports: [
  BrowserModule,
  AppRoutingModule,
- DxButtonModule,
+ DxDataGridModule,
+ DxNumberBoxModule,
  ],
  providers: [],
  bootstrap: [AppComponent],

Angular/src/app/app.service.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+
+export interface PaymentInfo {
+ PaymentId: number;
+ ContactName: string;
+ CompanyName: string;
+ Amount: number;
+ PaymentDate: string;
+}
+
+const payments: PaymentInfo[] = [
+ {
+ PaymentId: 1,
+ ContactName: 'Nancy Davolio',
+ CompanyName: 'Premier Buy',
+ Amount: 1740,
+ PaymentDate: '2013/01/06',
+ },
+ {
+ PaymentId: 2,
+ ContactName: 'Andrew Fuller',
+ CompanyName: 'ElectrixMax',
+ Amount: 850,
+ PaymentDate: '2013/01/13',
+ },
+ {
+ PaymentId: 3,
+ ContactName: 'Janet Leverling',
+ CompanyName: 'Video Emporium',
+ Amount: 2235,
+ PaymentDate: '2013/01/07',
+ },
+ {
+ PaymentId: 4,
+ ContactName: 'Margaret Peacock',
+ CompanyName: 'Screen Shop',
+ Amount: 1965,
+ PaymentDate: '2013/01/03',
+ },
+ {
+ PaymentId: 5,
+ ContactName: 'Steven Buchanan',
+ CompanyName: 'Braeburn',
+ Amount: 880,
+ PaymentDate: '2013/01/10',
+ },
+ {
+ PaymentId: 6,
+ ContactName: 'Michael Suyama',
+ CompanyName: 'PriceCo',
+ Amount: 5260,
+ PaymentDate: '2013/01/17',
+ },
+ {
+ PaymentId: 7,
+ ContactName: 'Robert King',
+ CompanyName: 'Ultimate Gadget',
+ Amount: 2790,
+ PaymentDate: '2013/01/21',
+ },
+ {
+ PaymentId: 8,
+ ContactName: 'Laura Callahan',
+ CompanyName: 'EZ Stop',
+ Amount: 3140,
+ PaymentDate: '2013/01/01',
+ },
+ {
+ PaymentId: 9,
+ ContactName: 'Anne Dodsworth',
+ CompanyName: 'Clicker',
+ Amount: 6175,
+ PaymentDate: '2013/01/24',
+ },
+ {
+ PaymentId: 10,
+ ContactName: 'Clark Morgan',
+ CompanyName: 'Store of America',
+ Amount: 4575,
+ PaymentDate: '2013/01/11',
+ },
+];
+
+@Injectable()
+export class Service {
+ getPayments(): PaymentInfo[] {
+ return payments;
+ }
+}

Angular/src/main.ts

@@ -3,4 +3,4 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule)
- .catch((err) => console.error(err));
+ .catch((err) => new Error(err));