-
-
-
-
+
+
+
Monthly profit
$12,649
-
+
diff --git a/examples-standalone/grid-live-data/src/app/main-panel/balance/balance.component.ts b/examples-standalone/grid-live-data/src/app/main-panel/balance/balance.component.ts
index ef4d54f..e2a1c2d 100644
--- a/examples-standalone/grid-live-data/src/app/main-panel/balance/balance.component.ts
+++ b/examples-standalone/grid-live-data/src/app/main-panel/balance/balance.component.ts
@@ -1,8 +1,15 @@
import { Component } from '@angular/core';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { SVGIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
@Component({
- selector: 'balance',
- templateUrl: './balance.component.html',
- styleUrls: ['./balance.component.css']
+ selector: 'balance',
+ standalone: true,
+ imports: [LayoutModule, ButtonsModule],
+ templateUrl: './balance.component.html',
+ styleUrl: './balance.component.css'
})
-export class BalanceComponent {}
+export class BalanceComponent {
+ public upArrowIcon: SVGIcon = caretAltUpIcon;
+}
diff --git a/examples-standalone/grid-live-data/src/app/main-panel/main-panel.component.ts b/examples-standalone/grid-live-data/src/app/main-panel/main-panel.component.ts
index a662cbf..a91d4ea 100644
--- a/examples-standalone/grid-live-data/src/app/main-panel/main-panel.component.ts
+++ b/examples-standalone/grid-live-data/src/app/main-panel/main-panel.component.ts
@@ -1,9 +1,14 @@
import { Component, ViewEncapsulation } from '@angular/core';
+import { NewsComponent } from './news/news.component';
+import { BalanceComponent } from './balance/balance.component';
+import { TransactionsComponent } from './transactions/transactions.component';
@Component({
selector: 'main-panel',
templateUrl: './main-panel.component.html',
styleUrls: ['./main-panel.component.css'],
+ imports: [BalanceComponent, NewsComponent, TransactionsComponent],
+ standalone: true,
encapsulation: ViewEncapsulation.None
})
-export class MainPanelComponent {}
+export class MainPanelComponent {}
\ No newline at end of file
diff --git a/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.css b/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.css
index 7800838..d0e5074 100644
--- a/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.css
+++ b/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.css
@@ -8,4 +8,4 @@
.news-img {
border-radius: 10px;
-}
+}
\ No newline at end of file
diff --git a/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.ts b/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.ts
index 0e201c0..70c01c5 100644
--- a/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.ts
+++ b/examples-standalone/grid-live-data/src/app/main-panel/news/news.component.ts
@@ -1,11 +1,15 @@
import { Component } from '@angular/core';
-import { News } from 'src/app/models/news.model';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { News } from '../../models/news.model';
import { newsFeed } from '../transaction-data/news-data';
+import { CommonModule } from '@angular/common';
@Component({
- selector: 'news',
- templateUrl: './news.component.html',
- styleUrls: ['./news.component.css']
+ selector: 'news',
+ standalone: true,
+ imports: [LayoutModule, CommonModule],
+ templateUrl: './news.component.html',
+ styleUrl: './news.component.css'
})
export class NewsComponent {
public newsFeedData: News[] = newsFeed;
diff --git a/examples-standalone/grid-live-data/src/app/main-panel/transactions/transactions.component.ts b/examples-standalone/grid-live-data/src/app/main-panel/transactions/transactions.component.ts
index 40bd80e..cb15606 100644
--- a/examples-standalone/grid-live-data/src/app/main-panel/transactions/transactions.component.ts
+++ b/examples-standalone/grid-live-data/src/app/main-panel/transactions/transactions.component.ts
@@ -1,11 +1,15 @@
import { Component } from '@angular/core';
-import { Transactions } from 'src/app/models/transaction.model';
+import { Transactions } from '../../models/transaction.model';
import { accountTransactions } from '../transaction-data/transactions';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { CommonModule } from '@angular/common';
@Component({
- selector: 'transactions',
- templateUrl: './transactions.component.html',
- styleUrls: ['./transactions.component.css']
+ selector: 'transactions',
+ standalone: true,
+ imports: [LayoutModule, CommonModule],
+ templateUrl: './transactions.component.html',
+ styleUrl: './transactions.component.css'
})
export class TransactionsComponent {
public transactionCards: Transactions[] = accountTransactions;
diff --git a/examples-standalone/grid-live-data/src/app/my-portfolio/cards-data.ts b/examples-standalone/grid-live-data/src/app/my-portfolio/card-data.ts
similarity index 100%
rename from examples-standalone/grid-live-data/src/app/my-portfolio/cards-data.ts
rename to examples-standalone/grid-live-data/src/app/my-portfolio/card-data.ts
diff --git a/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.html b/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.html
index 712b5bc..5b33e10 100644
--- a/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.html
+++ b/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.html
@@ -17,8 +17,8 @@
{{ card.currency }}
-
-
+
+
{{getPriceChange(card) | currency: "USD"}} ({{card.change_24h}}%)
diff --git a/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.ts b/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.ts
index f739321..b66f480 100644
--- a/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.ts
+++ b/examples-standalone/grid-live-data/src/app/my-portfolio/my-portfolio.component.ts
@@ -1,18 +1,26 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { SVGIcon, caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
+import { cards } from './card-data';
+import { Stock } from '../../services/stocks.service';
import { IntlService } from '@progress/kendo-angular-intl';
import { Observable } from 'rxjs';
-import { Stock } from '../services/stocks.service';
-import { cards } from './cards-data';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { LayoutModule } from '@progress/kendo-angular-layout';
@Component({
- selector: 'my-portfolio',
- templateUrl: './my-portfolio.component.html',
- styleUrls: ['./my-portfolio.component.css'],
- encapsulation: ViewEncapsulation.None
+ selector: 'my-portfolio',
+ standalone: true,
+ imports: [IconsModule, LayoutModule],
+ templateUrl: './my-portfolio.component.html',
+ styleUrl: './my-portfolio.component.css',
+ encapsulation: ViewEncapsulation.None
})
export class MyPortfolioComponent {
@Input() data!: Observable;
+ public upArrowIcon: SVGIcon = caretAltUpIcon;
+ public downArrowIcon: SVGIcon = caretAltDownIcon;
+
public cryptoCards: Stock[] = cards;
constructor(public intl: IntlService) {}
diff --git a/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.css b/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.css
index 5ae09fe..e69de29 100644
--- a/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.css
+++ b/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.css
@@ -1,5 +0,0 @@
-.total-portfolio-title {
- font-weight: 500;
- font-size: 24px;
- color: #626880
-}
diff --git a/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.ts b/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.ts
index 165ac5f..4abdb2b 100644
--- a/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.ts
+++ b/examples-standalone/grid-live-data/src/app/total-portfolio/total-portfolio.component.ts
@@ -1,11 +1,14 @@
import { Component, ViewEncapsulation } from '@angular/core';
-import { CategoryAxisLabels, SeriesLine, ValueAxisLabels } from '@progress/kendo-angular-charts';
+import { CategoryAxisLabels, ChartsModule, SeriesLine, ValueAxisLabels } from '@progress/kendo-angular-charts';
+import 'hammerjs';
@Component({
- selector: 'total-portfolio',
- templateUrl: './total-portfolio.component.html',
- styleUrls: ['./total-portfolio.component.css'],
- encapsulation: ViewEncapsulation.None
+ selector: 'total-portfolio',
+ standalone: true,
+ imports: [ChartsModule],
+ templateUrl: './total-portfolio.component.html',
+ styleUrl: './total-portfolio.component.css',
+ encapsulation: ViewEncapsulation.None
})
export class TotalPortfolioComponent {
public categories: Array = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
diff --git a/examples-standalone/grid-live-data/src/assets/.gitkeep copy b/examples-standalone/grid-live-data/src/assets/.gitkeep copy
new file mode 100644
index 0000000..e69de29
diff --git a/examples-standalone/grid-live-data/src/environments/environment.prod.ts b/examples-standalone/grid-live-data/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073..0000000
--- a/examples-standalone/grid-live-data/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-};
diff --git a/examples-standalone/grid-live-data/src/environments/environment.ts b/examples-standalone/grid-live-data/src/environments/environment.ts
deleted file mode 100644
index f56ff47..0000000
--- a/examples-standalone/grid-live-data/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/examples-standalone/grid-live-data/src/favicon.ico b/examples-standalone/grid-live-data/src/favicon.ico
index 8081c7c..57614f9 100644
Binary files a/examples-standalone/grid-live-data/src/favicon.ico and b/examples-standalone/grid-live-data/src/favicon.ico differ
diff --git a/examples-standalone/grid-live-data/src/index.html b/examples-standalone/grid-live-data/src/index.html
index a051b63..83fc489 100644
--- a/examples-standalone/grid-live-data/src/index.html
+++ b/examples-standalone/grid-live-data/src/index.html
@@ -2,7 +2,7 @@
- Grid Live Data
+ GridLiveData
diff --git a/examples-standalone/grid-live-data/src/main.ts b/examples-standalone/grid-live-data/src/main.ts
index c7b673c..ee35435 100644
--- a/examples-standalone/grid-live-data/src/main.ts
+++ b/examples-standalone/grid-live-data/src/main.ts
@@ -1,12 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+///
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));
diff --git a/examples-standalone/grid-live-data/src/polyfills.ts b/examples-standalone/grid-live-data/src/polyfills.ts
deleted file mode 100644
index 9194e82..0000000
--- a/examples-standalone/grid-live-data/src/polyfills.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/***************************************************************************************************
- * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
- */
-import '@angular/localize/init';
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/examples-standalone/grid-live-data/src/app/services/stocks.service.ts b/examples-standalone/grid-live-data/src/services/stocks.service.ts
similarity index 100%
rename from examples-standalone/grid-live-data/src/app/services/stocks.service.ts
rename to examples-standalone/grid-live-data/src/services/stocks.service.ts
diff --git a/examples-standalone/grid-live-data/src/styles.css b/examples-standalone/grid-live-data/src/styles.css
index ab3f369..d37d038 100644
--- a/examples-standalone/grid-live-data/src/styles.css
+++ b/examples-standalone/grid-live-data/src/styles.css
@@ -1,5 +1,4 @@
/* You can add global styles to this file, and also import other style files */
-
body {
margin: 0;
-}
+}
\ No newline at end of file
diff --git a/examples-standalone/grid-live-data/src/test.ts b/examples-standalone/grid-live-data/src/test.ts
deleted file mode 100644
index 598d11e..0000000
--- a/examples-standalone/grid-live-data/src/test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- keys(): string[];
- (id: string): T;
- };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/examples-standalone/grid-live-data/tsconfig.app.json b/examples-standalone/grid-live-data/tsconfig.app.json
index 82d91dc..ec26f70 100644
--- a/examples-standalone/grid-live-data/tsconfig.app.json
+++ b/examples-standalone/grid-live-data/tsconfig.app.json
@@ -3,11 +3,12 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
- "types": []
+ "types": [
+ "@angular/localize"
+ ]
},
"files": [
- "src/main.ts",
- "src/polyfills.ts"
+ "src/main.ts"
],
"include": [
"src/**/*.d.ts"
diff --git a/examples-standalone/grid-live-data/tsconfig.json b/examples-standalone/grid-live-data/tsconfig.json
index f531992..f37b67f 100644
--- a/examples-standalone/grid-live-data/tsconfig.json
+++ b/examples-standalone/grid-live-data/tsconfig.json
@@ -2,7 +2,6 @@
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
@@ -10,16 +9,18 @@
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
"sourceMap": true,
"declaration": false,
- "downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es2017",
- "module": "es2020",
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
"lib": [
- "es2020",
+ "ES2022",
"dom"
]
},
diff --git a/examples-standalone/grid-live-data/tsconfig.spec.json b/examples-standalone/grid-live-data/tsconfig.spec.json
index 092345b..c63b698 100644
--- a/examples-standalone/grid-live-data/tsconfig.spec.json
+++ b/examples-standalone/grid-live-data/tsconfig.spec.json
@@ -4,13 +4,10 @@
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
- "jasmine"
+ "jasmine",
+ "@angular/localize"
]
},
- "files": [
- "src/test.ts",
- "src/polyfills.ts"
- ],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"