Use inject context instead of constructor

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;

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) { }
 }

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();
         });

src/app/demo/components/documentation/documentation.component.html

@@ -41,7 +41,7 @@ Run 'ng help' for more options.</code></pre>
             initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. 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. </p>
     
-<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '@angular/core';
+<pre class="app-code"><code>import &#123; Component, OnInit, inject &#125; from '@angular/core';
 import &#123; PrimeNGConfig &#125; from 'primeng/api';
 import &#123; LayoutService &#125; from './layout/service/app.layout.service';
 
@@ -51,7 +51,11 @@ import &#123; LayoutService &#125; from './layout/service/app.layout.service';
 &#125;)
 export class AppComponent implements OnInit &#123;
 
-    constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) &#123; &#125;
+    private primengConfig = inject(PrimeNGConfig);
+    
+    private layoutService = inject(LayoutService);
+
+    constructor() &#123; &#125;
 
     ngOnInit(): void &#123;
         this.primengConfig.ripple = true;       //enables core ripple functionality

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);
     
 }

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);
 

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();
         });

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) {

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;

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;

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;

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);
 

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;

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' });

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);
 

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;

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);

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 => {

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<any>('assets/demo/data/countries.json')

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<any>('assets/demo/data/customers-small.json')

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<any>('assets/demo/data/scheduleevents.json')

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[];
 

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<any>('assets/demo/data/files.json')

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<any>('assets/demo/data/photos.json')

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<any>('assets/demo/data/products-small.json')

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);
 }

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 => {

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 = [

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) {

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);
 }
 

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) { }
 }

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;
     }