chore: use utility arrays

Author: mbechev

examples-standalone/finance-portfolio/src/app/app.component.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { ActionButtonsComponent } from './components/action-buttons/action-buttons.component';
 
 @Component({
     selector: 'app-root',
+    imports: [RouterOutlet, HeaderComponent, FooterComponent, ActionButtonsComponent],
     template: `
         <app-header></app-header>
 
@@ -11,7 +16,6 @@ import { Component } from '@angular/core';
         </main>
 
         <app-footer></app-footer>
-    `,
-    standalone: false
+    `
 })
 export class AppComponent {}

examples-standalone/finance-portfolio/src/app/app.config.ts

@@ -0,0 +1,15 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { routes } from './app.routes';
+import { StockDataService } from './services/stock-data.service';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZoneChangeDetection(),
+        provideRouter(routes, withHashLocation()),
+        provideAnimations(),
+        StockDataService
+    ]
+};

examples-standalone/finance-portfolio/src/app/app.module.ts

@@ -1,21 +1,14 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { StocksComponent } from './components/stocks/stocks.component';
 import { HeatmapComponent } from './components/heatmap/heatmap.component';
 import { UserProfileComponent } from './components/user-profile/user-profile.component';
 import { RealTimeDataComponent } from './components/real-time-data/real-time-data.component';
 
-const routes: Routes = [
+export const routes: Routes = [
     { path: 'stocks', component: StocksComponent },
     { path: 'heatmap', component: HeatmapComponent },
     { path: 'real-time', component: RealTimeDataComponent },
     { path: 'profile', component: UserProfileComponent },
     { path: '', redirectTo: '/stocks', pathMatch: 'full' },
     { path: '**', redirectTo: '/stocks', pathMatch: 'full' }
 ];
-
-@NgModule({
-    imports: [RouterModule.forRoot(routes, { useHash: true })],
-    exports: [RouterModule]
-})
-export class AppRoutingModule {}

…-portfolio/src/app/app-routing.module.ts …/finance-portfolio/src/app/app.routes.tsexamples-standalone/finance-portfolio/src/app/app-routing.module.ts renamed to examples-standalone/finance-portfolio/src/app/app.routes.ts examples-standalone/finance-portfolio/src/app/app-routing.module.ts renamed to examples-standalone/finance-portfolio/src/app/app.routes.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { SVGIcon, downloadIcon, fileTxtIcon } from '@progress/kendo-svg-icons';
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 
 @Component({
     selector: 'app-action-buttons',
     templateUrl: './action-buttons.component.html',
     styleUrls: ['./action-buttons.component.scss'],
-    standalone: false
+    imports: [KENDO_BUTTONS]
 })
 export class ActionButtonsComponent {
     public filteText: SVGIcon = fileTxtIcon;

examples-standalone/finance-portfolio/src/app/components/action-buttons/action-buttons.component.ts

@@ -1,10 +1,11 @@
 import { Component, Input, HostBinding } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'app-badge',
     templateUrl: './badge.component.html',
     styleUrls: ['./badge.component.scss'],
-    standalone: false
+    imports: [CommonModule]
 })
 export class BadgeComponent {
     @Input() public item: any;

examples-standalone/finance-portfolio/src/app/components/badge/badge.component.ts

@@ -5,8 +5,7 @@ import { Router } from '@angular/router';
     selector: 'app-footer',
     templateUrl: './footer.component.html',
     styleUrls: ['./footer.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    standalone: false
+    encapsulation: ViewEncapsulation.None
 })
 export class FooterComponent {
     public currentYear: number = new Date().getFullYear();

examples-standalone/finance-portfolio/src/app/components/footer/footer.component.ts

@@ -1,13 +1,14 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
 import { StockDataService } from '../../services/stock-data.service';
+import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
 
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    standalone: false
+    imports: [KENDO_DROPDOWNS]
 })
 export class HeaderComponent {
     public listItems: Array<string> = ['USD', 'EUR', 'GBP'];

examples-standalone/finance-portfolio/src/app/components/header/header.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnD
 import { formatCurrency } from '../../pipes/helpers';
 import { StockDataService } from '../../services/stock-data.service';
 import { Stock } from '../../models';
+import { NavigationComponent } from '../navigation/navigation.component';
 
 declare var kendo: any;
 
@@ -10,7 +11,7 @@ declare var kendo: any;
     templateUrl: './heatmap.component.html',
     styleUrls: ['./heatmap.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    standalone: false
+    imports: [NavigationComponent]
 })
 export class HeatmapComponent implements AfterViewInit, OnDestroy {
     @ViewChild('heatmap') heatmap: ElementRef | undefined;

examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.ts

@@ -1,10 +1,12 @@
 import { Component, HostBinding } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 
 @Component({
     selector: 'app-navigation',
     templateUrl: './navigation.component.html',
     styleUrls: ['./navigation.component.scss'],
-    standalone: false
+    imports: [RouterLink, RouterLinkActive, KENDO_BUTTONS]
 })
 export class NavigationComponent {
     @HostBinding('class.text-center')