From afd2f4f336710b2b4f9cd6194baaa5cdf5821257 Mon Sep 17 00:00:00 2001 From: Justin McLellan Date: Sun, 11 Jun 2023 08:19:39 -0500 Subject: [PATCH] Use inject context instead of constructor --- src/app/app.component.ts | 4 ++-- .../components/auth/login/login.component.ts | 6 ++--- .../dashboard/dashboard.component.ts | 8 +++++-- .../documentation.component.html | 8 +++++-- .../components/landing/landing.component.ts | 6 +++-- .../components/pages/crud/crud.component.ts | 9 +++++--- .../uikit/charts/chartsdemo.component.ts | 6 +++-- .../uikit/file/filedemo.component.ts | 6 ++--- .../floatlabel/floatlabeldemo.component.ts | 22 +++++++++---------- .../uikit/input/inputdemo.component.ts | 6 ++--- .../invalid/invalidstatedemo.component.ts | 22 +++++++++---------- .../uikit/list/listdemo.component.ts | 6 ++--- .../uikit/media/mediademo.component.ts | 8 ++++--- .../uikit/messages/messagesdemo.component.ts | 6 ++--- .../uikit/overlays/overlaysdemo.component.ts | 10 ++++++--- .../uikit/table/tabledemo.component.ts | 8 ++++--- .../uikit/tree/treedemo.component.ts | 6 ++--- .../utilities/icons/icons.component.ts | 6 ++--- src/app/demo/service/country.service.ts | 4 ++-- src/app/demo/service/customer.service.ts | 4 ++-- src/app/demo/service/event.service.ts | 4 ++-- src/app/demo/service/icon.service.ts | 4 ++-- src/app/demo/service/node.service.ts | 4 ++-- src/app/demo/service/photo.service.ts | 4 ++-- src/app/demo/service/product.service.ts | 4 ++-- src/app/layout/app.footer.component.ts | 5 +++-- src/app/layout/app.layout.component.ts | 10 +++++++-- src/app/layout/app.menu.component.ts | 6 ++--- src/app/layout/app.menuitem.component.ts | 10 +++++++-- src/app/layout/app.sidebar.component.ts | 7 ++++-- src/app/layout/app.topbar.component.ts | 5 +++-- src/app/layout/config/app.config.component.ts | 8 ++++--- 32 files changed, 135 insertions(+), 97 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2250bcd..2f6b44e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { PrimeNGConfig } from 'primeng/api'; import { RouterOutlet } from '@angular/router'; @@ -10,7 +10,7 @@ import { RouterOutlet } from '@angular/router'; }) export class AppComponent implements OnInit { - constructor(private primengConfig: PrimeNGConfig) { } + private primengConfig = inject(PrimeNGConfig); ngOnInit() { this.primengConfig.ripple = true; diff --git a/src/app/demo/components/auth/login/login.component.ts b/src/app/demo/components/auth/login/login.component.ts index 1fe845d..6b165a7 100644 --- a/src/app/demo/components/auth/login/login.component.ts +++ b/src/app/demo/components/auth/login/login.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { LayoutService } from 'src/app/layout/service/app.layout.service'; import { RouterLink } from '@angular/router'; import { ButtonModule } from 'primeng/button'; @@ -23,9 +23,9 @@ import { InputTextModule } from 'primeng/inputtext'; }) export class LoginComponent { + layoutService = inject(LayoutService); + valCheck: string[] = ['remember']; password!: string; - - constructor(public layoutService: LayoutService) { } } diff --git a/src/app/demo/components/dashboard/dashboard.component.ts b/src/app/demo/components/dashboard/dashboard.component.ts index a04cb25..19624e2 100644 --- a/src/app/demo/components/dashboard/dashboard.component.ts +++ b/src/app/demo/components/dashboard/dashboard.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, inject } from '@angular/core'; import { MenuItem, SharedModule } from 'primeng/api'; import { Product } from '../../api/product'; import { ProductService } from '../../service/product.service'; @@ -25,6 +25,10 @@ import { NgStyle, CurrencyPipe } from '@angular/common'; }) export class DashboardComponent implements OnInit, OnDestroy { + private productService = inject(ProductService); + + layoutService = inject(LayoutService); + items!: MenuItem[]; products!: Product[]; @@ -35,7 +39,7 @@ export class DashboardComponent implements OnInit, OnDestroy { subscription!: Subscription; - constructor(private productService: ProductService, public layoutService: LayoutService) { + constructor() { this.subscription = this.layoutService.configUpdate$.subscribe(() => { this.initChart(); }); diff --git a/src/app/demo/components/documentation/documentation.component.html b/src/app/demo/components/documentation/documentation.component.html index 7c1c80d..4fd592a 100644 --- a/src/app/demo/components/documentation/documentation.component.html +++ b/src/app/demo/components/documentation/documentation.component.html @@ -41,7 +41,7 @@ Run 'ng help' for more options. initial scale is defined with the $scale at layout.scss. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values to avoid sync issues.

-
import { Component, OnInit } from '@angular/core';
+
import { Component, OnInit, inject } from '@angular/core';
 import { PrimeNGConfig } from 'primeng/api';
 import { LayoutService } from './layout/service/app.layout.service';
 
@@ -51,7 +51,11 @@ import { LayoutService } from './layout/service/app.layout.service';
 })
 export class AppComponent implements OnInit {
 
-    constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) { }
+    private primengConfig = inject(PrimeNGConfig);
+    
+    private layoutService = inject(LayoutService);
+
+    constructor() { }
 
     ngOnInit(): void {
         this.primengConfig.ripple = true;       //enables core ripple functionality
diff --git a/src/app/demo/components/landing/landing.component.ts b/src/app/demo/components/landing/landing.component.ts
index 962f6c3..572347d 100644
--- a/src/app/demo/components/landing/landing.component.ts
+++ b/src/app/demo/components/landing/landing.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
 import { DividerModule } from 'primeng/divider';
@@ -13,6 +13,8 @@ import { StyleClassModule } from 'primeng/styleclass';
 })
 export class LandingComponent {
 
-    constructor(public layoutService: LayoutService, public router: Router) { }
+    public layoutService = inject(LayoutService)
+    
+    router = inject(Router);
     
 }
diff --git a/src/app/demo/components/pages/crud/crud.component.ts b/src/app/demo/components/pages/crud/crud.component.ts
index 507d207..4ae0275 100644
--- a/src/app/demo/components/pages/crud/crud.component.ts
+++ b/src/app/demo/components/pages/crud/crud.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Product } from 'src/app/demo/api/product';
 import { MessageService, SharedModule } from 'primeng/api';
 import { Table, TableModule } from 'primeng/table';
@@ -25,6 +25,11 @@ import { ToastModule } from 'primeng/toast';
     imports: [ToastModule, ToolbarModule, SharedModule, ButtonModule, RippleModule, FileUploadModule, TableModule, InputTextModule, RatingModule, FormsModule, DialogModule, NgIf, NgClass, InputTextareaModule, DropdownModule, RadioButtonModule, InputNumberModule, CurrencyPipe]
 })
 export class CrudComponent implements OnInit {
+    
+    private messageService = inject(MessageService);
+
+    private productService = inject(ProductService);
+    
 
     productDialog: boolean = false;
 
@@ -46,8 +51,6 @@ export class CrudComponent implements OnInit {
 
     rowsPerPageOptions = [5, 10, 20];
 
-    constructor(private productService: ProductService, private messageService: MessageService) { }
-
     ngOnInit() {
         this.productService.getProducts().then(data => this.products = data);
 
diff --git a/src/app/demo/components/uikit/charts/chartsdemo.component.ts b/src/app/demo/components/uikit/charts/chartsdemo.component.ts
index 5bf88dc..c1c4ac6 100755
--- a/src/app/demo/components/uikit/charts/chartsdemo.component.ts
+++ b/src/app/demo/components/uikit/charts/chartsdemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
 import { ChartModule } from 'primeng/chart';
@@ -10,6 +10,8 @@ import { ChartModule } from 'primeng/chart';
 })
 export class ChartsDemoComponent implements OnInit, OnDestroy {
 
+    layoutService = inject(LayoutService);
+
     lineData: any;
 
     barData: any;
@@ -32,7 +34,7 @@ export class ChartsDemoComponent implements OnInit, OnDestroy {
 
     subscription: Subscription;
 
-    constructor(public layoutService: LayoutService) {
+    constructor() {
         this.subscription = this.layoutService.configUpdate$.subscribe(config => {
             this.initCharts();
         });
diff --git a/src/app/demo/components/uikit/file/filedemo.component.ts b/src/app/demo/components/uikit/file/filedemo.component.ts
index dfe8f07..bdb3b26 100755
--- a/src/app/demo/components/uikit/file/filedemo.component.ts
+++ b/src/app/demo/components/uikit/file/filedemo.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MessageService, SharedModule } from 'primeng/api';
 import { NgIf, NgFor } from '@angular/common';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -11,9 +11,9 @@ import { FileUploadModule } from 'primeng/fileupload';
 })
 export class FileDemoComponent {
 
-    uploadedFiles: any[] = [];
+    private messageService = inject(MessageService);
 
-    constructor(private messageService: MessageService) {}
+    uploadedFiles: any[] = [];
 
     onUpload(event: any) {
         for (const file of event.files) {
diff --git a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
index f61f2c2..8afe4d3 100644
--- a/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
+++ b/src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { CountryService } from 'src/app/demo/service/country.service';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { MultiSelectModule } from 'primeng/multiselect';
@@ -29,9 +29,17 @@ import { FormsModule } from '@angular/forms';
 })
 export class FloatLabelDemoComponent implements OnInit {
 
+    private countryService = inject(CountryService);
+
     countries: any[] = [];
 
-    cities: any[];
+    cities: any[] = [
+        {name: 'New York', code: 'NY'},
+        {name: 'Rome', code: 'RM'},
+        {name: 'London', code: 'LDN'},
+        {name: 'Istanbul', code: 'IST'},
+        {name: 'Paris', code: 'PRS'}
+    ];
 
     filteredCountries: any[] = [];
 
@@ -59,16 +67,6 @@ export class FloatLabelDemoComponent implements OnInit {
 
     value12: any;
 
-    constructor(private countryService: CountryService) {
-        this.cities = [
-            {name: 'New York', code: 'NY'},
-            {name: 'Rome', code: 'RM'},
-            {name: 'London', code: 'LDN'},
-            {name: 'Istanbul', code: 'IST'},
-            {name: 'Paris', code: 'PRS'}
-        ];
-    }
-
     ngOnInit() {
         this.countryService.getCountries().then(countries => {
             this.countries = countries;
diff --git a/src/app/demo/components/uikit/input/inputdemo.component.ts b/src/app/demo/components/uikit/input/inputdemo.component.ts
index 977a544..50b7153 100644
--- a/src/app/demo/components/uikit/input/inputdemo.component.ts
+++ b/src/app/demo/components/uikit/input/inputdemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { SelectItem, SharedModule } from 'primeng/api';
 import { CountryService } from 'src/app/demo/service/country.service';
 import { ButtonModule } from 'primeng/button';
@@ -29,6 +29,8 @@ import { InputTextModule } from 'primeng/inputtext';
 })
 export class InputDemoComponent implements OnInit {
     
+    private countryService = inject(CountryService);
+
     countries: any[] = [];
 
     filteredCountries: any[] = [];
@@ -65,8 +67,6 @@ export class InputDemoComponent implements OnInit {
 
     valueKnob = 20;
 
-    constructor(private countryService: CountryService) { }
-
     ngOnInit() {
         this.countryService.getCountries().then(countries => {
             this.countries = countries;
diff --git a/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts b/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
index 4c603b3..6ab1116 100644
--- a/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
+++ b/src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { CountryService } from 'src/app/demo/service/country.service';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { MultiSelectModule } from 'primeng/multiselect';
@@ -19,9 +19,17 @@ import { InputTextModule } from 'primeng/inputtext';
 })
 export class InvalidStateDemoComponent implements OnInit {
 
+    private countryService = inject(CountryService);
+
     countries: any[] = [];
 
-    cities: any[];
+    cities: any[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
 
     filteredCountries: any[] = [];
 
@@ -45,16 +53,6 @@ export class InvalidStateDemoComponent implements OnInit {
 
     value10: any;
 
-    constructor(private countryService: CountryService) {
-        this.cities = [
-            { name: 'New York', code: 'NY' },
-            { name: 'Rome', code: 'RM' },
-            { name: 'London', code: 'LDN' },
-            { name: 'Istanbul', code: 'IST' },
-            { name: 'Paris', code: 'PRS' }
-        ];
-    }
-
     ngOnInit() {
         this.countryService.getCountries().then(countries => {
             this.countries = countries;
diff --git a/src/app/demo/components/uikit/list/listdemo.component.ts b/src/app/demo/components/uikit/list/listdemo.component.ts
index 7f7c2d7..fe2aefa 100644
--- a/src/app/demo/components/uikit/list/listdemo.component.ts
+++ b/src/app/demo/components/uikit/list/listdemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { SelectItem, SharedModule } from 'primeng/api';
 import { DataView, DataViewModule } from 'primeng/dataview';
 import { Product } from 'src/app/demo/api/product';
@@ -18,6 +18,8 @@ import { DropdownModule } from 'primeng/dropdown';
 })
 export class ListDemoComponent implements OnInit {
 
+    private productService = inject(ProductService);
+
     products: Product[] = [];
 
     sortOptions: SelectItem[] = [];
@@ -32,8 +34,6 @@ export class ListDemoComponent implements OnInit {
 
     orderCities: any[] = [];
 
-    constructor(private productService: ProductService) { }
-
     ngOnInit() {
         this.productService.getProducts().then(data => this.products = data);
 
diff --git a/src/app/demo/components/uikit/media/mediademo.component.ts b/src/app/demo/components/uikit/media/mediademo.component.ts
index 30a17f0..c17d824 100644
--- a/src/app/demo/components/uikit/media/mediademo.component.ts
+++ b/src/app/demo/components/uikit/media/mediademo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ProductService } from 'src/app/demo/service/product.service';
 import { PhotoService } from 'src/app/demo/service/photo.service';
 import { Product } from 'src/app/demo/api/product';
@@ -15,6 +15,10 @@ import { CarouselModule } from 'primeng/carousel';
 })
 export class MediaDemoComponent implements OnInit {
 
+    private productService = inject(ProductService);
+    
+    private photoService = inject(PhotoService);
+
     products!: Product[];
 
     images!: any[];
@@ -56,8 +60,6 @@ export class MediaDemoComponent implements OnInit {
         }
     ];
 
-    constructor(private productService: ProductService, private photoService: PhotoService) { }
-
     ngOnInit() {
         this.productService.getProductsSmall().then(products => {
             this.products = products;
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.component.ts b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
index bd8b6a2..8ff3e30 100755
--- a/src/app/demo/components/uikit/messages/messagesdemo.component.ts
+++ b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Message, MessageService } from 'primeng/api';
 import { MessageModule } from 'primeng/message';
 import { InputTextModule } from 'primeng/inputtext';
@@ -14,9 +14,9 @@ import { ToastModule } from 'primeng/toast';
 })
 export class MessagesDemoComponent {
 
-    msgs: Message[] = [];
+    private service = inject(MessageService);
 
-    constructor(private service: MessageService) { }
+    msgs: Message[] = [];
 
     showInfoViaToast() {
         this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts b/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
index 3447000..01ce3a0 100755
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ConfirmationService, MessageService, SharedModule } from 'primeng/api';
 import { Product } from 'src/app/demo/api/product';
 import { ProductService } from 'src/app/demo/service/product.service';
@@ -22,6 +22,12 @@ import { ToastModule } from 'primeng/toast';
 })
 export class OverlaysDemoComponent implements OnInit {
 
+    private productService = inject(ProductService);
+
+    private confirmationService = inject(ConfirmationService);
+    
+    private messageService= inject(MessageService);
+
     images: any[] = [];
 
     display: boolean = false;
@@ -40,8 +46,6 @@ export class OverlaysDemoComponent implements OnInit {
 
     visibleSidebar5: boolean = false;
 
-    constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { }
-
     ngOnInit() {
         this.productService.getProductsSmall().then(products => this.products = products);
 
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.ts b/src/app/demo/components/uikit/table/tabledemo.component.ts
index d293e56..36ca97a 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.ts
+++ b/src/app/demo/components/uikit/table/tabledemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
 import { Customer, Representative } from 'src/app/demo/api/customer';
 import { CustomerService } from 'src/app/demo/service/customer.service';
 import { Product } from 'src/app/demo/api/product';
@@ -30,6 +30,10 @@ interface expandedRows {
 })
 export class TableDemoComponent implements OnInit {
 
+    private customerService = inject(CustomerService);
+    
+    private productService = inject(ProductService);
+
     customers1: Customer[] = [];
 
     customers2: Customer[] = [];
@@ -60,8 +64,6 @@ export class TableDemoComponent implements OnInit {
 
     @ViewChild('filter') filter!: ElementRef;
 
-    constructor(private customerService: CustomerService, private productService: ProductService) { }
-
     ngOnInit() {
         this.customerService.getCustomersLarge().then(customers => {
             this.customers1 = customers;
diff --git a/src/app/demo/components/uikit/tree/treedemo.component.ts b/src/app/demo/components/uikit/tree/treedemo.component.ts
index 2204a4b..2fc247f 100644
--- a/src/app/demo/components/uikit/tree/treedemo.component.ts
+++ b/src/app/demo/components/uikit/tree/treedemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { NodeService } from 'src/app/demo/service/node.service';
 import { TreeNode, SharedModule } from 'primeng/api';
 import { NgFor, NgIf } from '@angular/common';
@@ -12,6 +12,8 @@ import { TreeModule } from 'primeng/tree';
 })
 export class TreeDemoComponent implements OnInit {
 
+    private nodeService = inject(NodeService);
+
     files1: TreeNode[] = [];
 
     files2: TreeNode[] = [];
@@ -26,8 +28,6 @@ export class TreeDemoComponent implements OnInit {
 
     cols: any[] = [];
 
-    constructor(private nodeService: NodeService) {}
-
     ngOnInit() {
         this.nodeService.getFiles().then(files => this.files1 = files);
         this.nodeService.getFilesystem().then(files => this.files2 = files);
diff --git a/src/app/demo/components/utilities/icons/icons.component.ts b/src/app/demo/components/utilities/icons/icons.component.ts
index 2a00336..a344d5d 100644
--- a/src/app/demo/components/utilities/icons/icons.component.ts
+++ b/src/app/demo/components/utilities/icons/icons.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { IconService } from 'src/app/demo/service/icon.service';
 import { NgFor } from '@angular/common';
 import { InputTextModule } from 'primeng/inputtext';
@@ -10,14 +10,14 @@ import { InputTextModule } from 'primeng/inputtext';
 })
 export class IconsComponent implements OnInit {
 
+    private iconService = inject(IconService);
+
     icons: any[] = [];
 
     filteredIcons: any[] = [];
 
     selectedIcon: any;
 
-    constructor(private iconService: IconService) { }
-
     ngOnInit() {
         this.iconService.getIcons().subscribe(data => {
             data = data.filter(value => {
diff --git a/src/app/demo/service/country.service.ts b/src/app/demo/service/country.service.ts
index 9a1c7ff..90685a5 100644
--- a/src/app/demo/service/country.service.ts
+++ b/src/app/demo/service/country.service.ts
@@ -1,10 +1,10 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 @Injectable({ providedIn: 'root'})
 export class CountryService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getCountries() {
         return this.http.get('assets/demo/data/countries.json')
diff --git a/src/app/demo/service/customer.service.ts b/src/app/demo/service/customer.service.ts
index 5f5b277..e764955 100644
--- a/src/app/demo/service/customer.service.ts
+++ b/src/app/demo/service/customer.service.ts
@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Customer } from '../api/customer';
 
 @Injectable({ providedIn: 'root'})
 export class CustomerService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getCustomersSmall() {
         return this.http.get('assets/demo/data/customers-small.json')
diff --git a/src/app/demo/service/event.service.ts b/src/app/demo/service/event.service.ts
index 67580eb..70bc4a4 100644
--- a/src/app/demo/service/event.service.ts
+++ b/src/app/demo/service/event.service.ts
@@ -1,10 +1,10 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 @Injectable({ providedIn: 'root'})
 export class EventService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getEvents() {
         return this.http.get('assets/demo/data/scheduleevents.json')
diff --git a/src/app/demo/service/icon.service.ts b/src/app/demo/service/icon.service.ts
index 3213c61..220c8e1 100644
--- a/src/app/demo/service/icon.service.ts
+++ b/src/app/demo/service/icon.service.ts
@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root'})
 export class IconService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     icons!: any[];
 
diff --git a/src/app/demo/service/node.service.ts b/src/app/demo/service/node.service.ts
index 08ed6b5..f540eb8 100644
--- a/src/app/demo/service/node.service.ts
+++ b/src/app/demo/service/node.service.ts
@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { TreeNode } from 'primeng/api';
 
 @Injectable({ providedIn: 'root'})
 export class NodeService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getFiles() {
         return this.http.get('assets/demo/data/files.json')
diff --git a/src/app/demo/service/photo.service.ts b/src/app/demo/service/photo.service.ts
index bc156f2..003aa02 100644
--- a/src/app/demo/service/photo.service.ts
+++ b/src/app/demo/service/photo.service.ts
@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Image } from '../api/image';
 
 @Injectable({ providedIn: 'root'})
 export class PhotoService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getImages() {
         return this.http.get('assets/demo/data/photos.json')
diff --git a/src/app/demo/service/product.service.ts b/src/app/demo/service/product.service.ts
index dc9dedb..a819ec9 100644
--- a/src/app/demo/service/product.service.ts
+++ b/src/app/demo/service/product.service.ts
@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Product } from '../api/product';
 
 @Injectable({ providedIn: 'root'})
 export class ProductService {
 
-    constructor(private http: HttpClient) { }
+    private http = inject(HttpClient);
 
     getProductsSmall() {
         return this.http.get('assets/demo/data/products-small.json')
diff --git a/src/app/layout/app.footer.component.ts b/src/app/layout/app.footer.component.ts
index 59e6eb7..28ec5d2 100644
--- a/src/app/layout/app.footer.component.ts
+++ b/src/app/layout/app.footer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { LayoutService } from "./service/app.layout.service";
 
 @Component({
@@ -7,5 +7,6 @@ import { LayoutService } from "./service/app.layout.service";
     standalone: true
 })
 export class AppFooterComponent {
-    constructor(public layoutService: LayoutService) { }
+
+    layoutService = inject(LayoutService);
 }
diff --git a/src/app/layout/app.layout.component.ts b/src/app/layout/app.layout.component.ts
index 4f511ee..a78989c 100644
--- a/src/app/layout/app.layout.component.ts
+++ b/src/app/layout/app.layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import { Component, OnDestroy, Renderer2, ViewChild, inject } from '@angular/core';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter, Subscription } from 'rxjs';
 import { LayoutService } from "./service/app.layout.service";
@@ -16,6 +16,12 @@ import { NgClass } from '@angular/common';
 })
 export class AppLayoutComponent implements OnDestroy {
 
+    layoutService = inject(LayoutService);
+    
+    renderer = inject(Renderer2);
+    
+    router = inject(Router);
+
     overlayMenuOpenSubscription: Subscription;
 
     menuOutsideClickListener: any;
@@ -26,7 +32,7 @@ export class AppLayoutComponent implements OnDestroy {
 
     @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
 
-    constructor(public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
+    constructor() {
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             if (!this.menuOutsideClickListener) {
                 this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
diff --git a/src/app/layout/app.menu.component.ts b/src/app/layout/app.menu.component.ts
index 910cee7..c104b05 100644
--- a/src/app/layout/app.menu.component.ts
+++ b/src/app/layout/app.menu.component.ts
@@ -1,5 +1,5 @@
 import { OnInit } from '@angular/core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { LayoutService } from './service/app.layout.service';
 import { AppMenuitemComponent } from './app.menuitem.component';
 import { NgFor, NgIf } from '@angular/common';
@@ -12,9 +12,9 @@ import { NgFor, NgIf } from '@angular/common';
 })
 export class AppMenuComponent implements OnInit {
 
-    model: any[] = [];
+    layoutService = inject(LayoutService);
 
-    constructor(public layoutService: LayoutService) { }
+    model: any[] = [];
 
     ngOnInit() {
         this.model = [
diff --git a/src/app/layout/app.menuitem.component.ts b/src/app/layout/app.menuitem.component.ts
index d311bf2..9876460 100644
--- a/src/app/layout/app.menuitem.component.ts
+++ b/src/app/layout/app.menuitem.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit, forwardRef } from '@angular/core';
+import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit, forwardRef, inject } from '@angular/core';
 import { NavigationEnd, Router, RouterLinkActive, RouterLink } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
@@ -53,6 +53,12 @@ import { NgIf, NgClass, NgFor } from '@angular/common';
 })
 export class AppMenuitemComponent implements OnInit, OnDestroy {
 
+    private menuService = inject(MenuService);
+
+    layoutService = inject(LayoutService);
+    
+    router = inject(Router);
+
     @Input() item: any;
 
     @Input() index!: number;
@@ -69,7 +75,7 @@ export class AppMenuitemComponent implements OnInit, OnDestroy {
 
     key: string = "";
 
-    constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService) {
+    constructor() {
         this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
             Promise.resolve(null).then(() => {
                 if (value.routeEvent) {
diff --git a/src/app/layout/app.sidebar.component.ts b/src/app/layout/app.sidebar.component.ts
index 09aed37..aa9d7dd 100644
--- a/src/app/layout/app.sidebar.component.ts
+++ b/src/app/layout/app.sidebar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component, ElementRef, inject } from '@angular/core';
 import { LayoutService } from "./service/app.layout.service";
 import { AppMenuComponent } from './app.menu.component';
 
@@ -9,6 +9,9 @@ import { AppMenuComponent } from './app.menu.component';
     imports: [AppMenuComponent]
 })
 export class AppSidebarComponent {
-    constructor(public layoutService: LayoutService, public el: ElementRef) { }
+
+    layoutService = inject(LayoutService);
+    
+    el = inject(ElementRef);
 }
 
diff --git a/src/app/layout/app.topbar.component.ts b/src/app/layout/app.topbar.component.ts
index 10e075f..7a01172 100644
--- a/src/app/layout/app.topbar.component.ts
+++ b/src/app/layout/app.topbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, inject } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { LayoutService } from "./service/app.layout.service";
 import { NgClass } from '@angular/common';
@@ -12,6 +12,8 @@ import { RouterLink } from '@angular/router';
 })
 export class AppTopBarComponent {
 
+    layoutService = inject(LayoutService);
+
     items!: MenuItem[];
 
     @ViewChild('menubutton') menuButton!: ElementRef;
@@ -20,5 +22,4 @@ export class AppTopBarComponent {
 
     @ViewChild('topbarmenu') menu!: ElementRef;
 
-    constructor(public layoutService: LayoutService) { }
 }
diff --git a/src/app/layout/config/app.config.component.ts b/src/app/layout/config/app.config.component.ts
index 727bc69..e3c92ad 100644
--- a/src/app/layout/config/app.config.component.ts
+++ b/src/app/layout/config/app.config.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { LayoutService } from "../service/app.layout.service";
 import { MenuService } from "../app.menu.service";
 import { InputSwitchModule } from 'primeng/inputswitch';
@@ -16,12 +16,14 @@ import { SidebarModule } from 'primeng/sidebar';
 })
 export class AppConfigComponent {
 
+    layoutService = inject(LayoutService);
+    
+    menuService = inject(MenuService);
+
     @Input() minimal: boolean = false;
 
     scales: number[] = [12, 13, 14, 15, 16];
 
-    constructor(public layoutService: LayoutService, public menuService: MenuService) { }
-
     get visible(): boolean {
         return this.layoutService.state.configSidebarVisible;
     }