convert to standalone

src/app/app.module.ts

@@ -13,12 +13,11 @@ import { NodeService } from './demo/service/node.service';
 import { PhotoService } from './demo/service/photo.service';
 
 @NgModule({
-    declarations: [
+    declarations: [AppComponent],
-        AppComponent, NotfoundComponent
-    ],
     imports: [
         AppRoutingModule,
-        AppLayoutModule
+        AppLayoutModule,
+        NotfoundComponent
     ],
     providers: [
         { provide: LocationStrategy, useClass: HashLocationStrategy },

src/app/demo/components/auth/access/access.component.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
     selector: 'app-access',
     templateUrl: './access.component.html',
+    standalone: true,
+    imports: [ButtonModule, RouterLink],
 })
 export class AccessComponent { }

src/app/demo/components/auth/access/access.module.ts

@@ -9,8 +9,8 @@ import { AccessComponent } from './access.component';
     imports: [
         CommonModule,
         AccessRoutingModule,
-        ButtonModule
+        ButtonModule,
-    ],
+        AccessComponent
-    declarations: [AccessComponent]
+    ]
 })
 export class AccessModule { }

src/app/demo/components/auth/error/error.component.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
     selector: 'app-error',
     templateUrl: './error.component.html',
+    standalone: true,
+    imports: [ButtonModule, RouterLink],
 })
 export class ErrorComponent { }

src/app/demo/components/auth/error/error.module.ts

@@ -8,8 +8,8 @@ import { ButtonModule } from 'primeng/button';
     imports: [
         CommonModule,
         ErrorRoutingModule,
-        ButtonModule
+        ButtonModule,
-    ],
+        ErrorComponent
-    declarations: [ErrorComponent]
+    ]
 })
 export class ErrorModule { }

src/app/demo/components/auth/login/login.component.ts

@@ -1,5 +1,11 @@
 import { Component } from '@angular/core';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
+import { RouterLink } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+import { PasswordModule } from 'primeng/password';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
     selector: 'app-login',
@@ -11,7 +17,9 @@ import { LayoutService } from 'src/app/layout/service/app.layout.service';
             margin-right: 1rem;
             color: var(--primary-color) !important;
         }
-    `]
+    `],
+    standalone: true,
+    imports: [InputTextModule, PasswordModule, FormsModule, CheckboxModule, ButtonModule, RouterLink]
 })
 export class LoginComponent {
 

src/app/demo/components/auth/login/login.module.ts

@@ -16,8 +16,8 @@ import { InputTextModule } from 'primeng/inputtext';
         CheckboxModule,
         InputTextModule,
         FormsModule,
-        PasswordModule
+        PasswordModule,
-    ],
+        LoginComponent
-    declarations: [LoginComponent]
+    ]
 })
 export class LoginModule { }

src/app/demo/components/dashboard/dashboard.component.ts

@@ -1,12 +1,27 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem, SharedModule } from 'primeng/api';
 import { Product } from '../../api/product';
 import { ProductService } from '../../service/product.service';
 import { Subscription } from 'rxjs';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
+import { ChartModule } from 'primeng/chart';
+import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import { NgStyle, CurrencyPipe } from '@angular/common';
 
 @Component({
     templateUrl: './dashboard.component.html',
+    standalone: true,
+    imports: [
+        NgStyle,
+        TableModule,
+        SharedModule,
+        ButtonModule,
+        MenuModule,
+        ChartModule,
+        CurrencyPipe,
+    ],
 })
 export class DashboardComponent implements OnInit, OnDestroy {
 

src/app/demo/components/dashboard/dashboard.module.ts

@@ -20,8 +20,8 @@ import { DashboardsRoutingModule } from './dashboard-routing.module';
         StyleClassModule,
         PanelMenuModule,
         ButtonModule,
-        DashboardsRoutingModule
+        DashboardsRoutingModule,
-    ],
+        DashboardComponent
-    declarations: [DashboardComponent]
+    ]
 })
 export class DashboardModule { }

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     templateUrl: './documentation.component.html',
-    styleUrls: ['./documentation.component.scss']
+    styleUrls: ['./documentation.component.scss'],
+    standalone: true
 })
 export class DocumentationComponent { }

src/app/demo/components/documentation/documentation.module.ts

@@ -6,8 +6,8 @@ import { DocumentationComponent } from './documentation.component';
 @NgModule({
     imports: [
         CommonModule,
-        DocumentationRoutingModule
+        DocumentationRoutingModule,
-    ],
+        DocumentationComponent
-    declarations: [DocumentationComponent]
+    ]
 })
 export class DocumentationModule { }

src/app/demo/components/landing/landing.component.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
+import { DividerModule } from 'primeng/divider';
+import { ButtonModule } from 'primeng/button';
+import { StyleClassModule } from 'primeng/styleclass';
 
 @Component({
     selector: 'app-landing',
-    templateUrl: './landing.component.html'
+    templateUrl: './landing.component.html',
+    standalone: true,
+    imports: [StyleClassModule, ButtonModule, DividerModule]
 })
 export class LandingComponent {
 

src/app/demo/components/landing/landing.module.ts

@@ -16,8 +16,8 @@ import { ButtonModule } from 'primeng/button';
         StyleClassModule,
         ChartModule,
         PanelModule,
-        ButtonModule
+        ButtonModule,
-    ],
+        LandingComponent
-    declarations: [LandingComponent]
+    ]
 })
 export class LandingModule { }

src/app/demo/components/notfound/notfound.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'app-notfound',
     templateUrl: './notfound.component.html',
+    standalone: true,
+    imports: [RouterLink],
 })
 export class NotfoundComponent { }

src/app/demo/components/pages/crud/crud.component.ts

@@ -1,12 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 import { Product } from 'src/app/demo/api/product';
-import { MessageService } from 'primeng/api';
+import { MessageService, SharedModule } from 'primeng/api';
-import { Table } from 'primeng/table';
+import { Table, TableModule } from 'primeng/table';
 import { ProductService } from 'src/app/demo/service/product.service';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { NgIf, NgClass, CurrencyPipe } from '@angular/common';
+import { DialogModule } from 'primeng/dialog';
+import { FormsModule } from '@angular/forms';
+import { RatingModule } from 'primeng/rating';
+import { InputTextModule } from 'primeng/inputtext';
+import { FileUploadModule } from 'primeng/fileupload';
+import { RippleModule } from 'primeng/ripple';
+import { ButtonModule } from 'primeng/button';
+import { ToolbarModule } from 'primeng/toolbar';
+import { ToastModule } from 'primeng/toast';
 
 @Component({
     templateUrl: './crud.component.html',
-    providers: [MessageService]
+    providers: [MessageService],
+    standalone: true,
+    imports: [ToastModule, ToolbarModule, SharedModule, ButtonModule, RippleModule, FileUploadModule, TableModule, InputTextModule, RatingModule, FormsModule, DialogModule, NgIf, NgClass, InputTextareaModule, DropdownModule, RadioButtonModule, InputNumberModule, CurrencyPipe]
 })
 export class CrudComponent implements OnInit {
 

src/app/demo/components/pages/crud/crud.module.ts

@@ -34,8 +34,8 @@ import { DialogModule } from 'primeng/dialog';
         DropdownModule,
         RadioButtonModule,
         InputNumberModule,
-        DialogModule
+        DialogModule,
-    ],
+        CrudComponent
-    declarations: [CrudComponent]
+    ]
 })
 export class CrudModule { }

src/app/demo/components/pages/empty/emptydemo.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-    templateUrl: './emptydemo.component.html'
+    templateUrl: './emptydemo.component.html',
+    standalone: true
 })
 export class EmptyDemoComponent { }

src/app/demo/components/pages/empty/emptydemo.module.ts

@@ -6,8 +6,8 @@ import { EmptyDemoComponent } from './emptydemo.component';
 @NgModule({
     imports: [
         CommonModule,
-        EmptyDemoRoutingModule
+        EmptyDemoRoutingModule,
-    ],
+        EmptyDemoComponent
-    declarations: [EmptyDemoComponent]
+    ]
 })
 export class EmptyDemoModule { }

src/app/demo/components/pages/timeline/timelinedemo.component.ts

@@ -1,9 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { PrimeIcons } from 'primeng/api';
+import { PrimeIcons, SharedModule } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+import { NgClass, NgIf } from '@angular/common';
+import { TimelineModule } from 'primeng/timeline';
 
 @Component({
     templateUrl: './timelinedemo.component.html',
-    styleUrls: ['./timelinedemo.scss']
+    styleUrls: ['./timelinedemo.scss'],
+    standalone: true,
+    imports: [TimelineModule, SharedModule, NgClass, CardModule, NgIf, ButtonModule]
 })
 export class TimelineDemoComponent implements OnInit {
 

src/app/demo/components/pages/timeline/timelinedemo.module.ts

@@ -12,8 +12,8 @@ import { CardModule } from 'primeng/card';
         TimelineModule,
         ButtonModule,
         CardModule,
-        TimelineDemoRoutingModule
+        TimelineDemoRoutingModule,
-    ],
+        TimelineDemoComponent
-    declarations: [TimelineDemoComponent]
+    ]
 })
 export class TimelineDemoModule { }

src/app/demo/components/primeblocks/blocks/blocks.component.ts

@@ -1,7 +1,15 @@
 import { Component } from '@angular/core';
+import { ChipModule } from 'primeng/chip';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextModule } from 'primeng/inputtext';
+import { RippleModule } from 'primeng/ripple';
+import { ButtonModule } from 'primeng/button';
+import { BlockViewerComponent } from '../blockviewer/blockviewer.component';
 
 @Component({
-    templateUrl: './blocks.component.html'
+    templateUrl: './blocks.component.html',
+    standalone: true,
+    imports: [BlockViewerComponent, ButtonModule, RippleModule, InputTextModule, CheckboxModule, ChipModule]
 })
 export class BlocksComponent{
 

src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input } from '@angular/core';
+import { TooltipModule } from 'primeng/tooltip';
+import { NgIf, NgClass, NgStyle } from '@angular/common';
 
 enum BlockView {
     PREVIEW,
@@ -35,7 +37,9 @@ enum BlockView {
         </div>
     </div>
   `,
-    styleUrls: ['./blockviewer.component.scss']
+    styleUrls: ['./blockviewer.component.scss'],
+    standalone: true,
+    imports: [NgIf, NgClass, TooltipModule, NgStyle]
 })
 export class BlockViewerComponent {
 

src/app/demo/components/primeblocks/primeblocks.module.ts

@@ -23,8 +23,8 @@ import { TooltipModule } from 'primeng/tooltip';
         InputTextModule,
         PasswordModule,
         TooltipModule,
-        PrimeBlocksRoutingModule
+        PrimeBlocksRoutingModule,
-    ],
+        BlocksComponent, BlockViewerComponent
-    declarations: [BlocksComponent, BlockViewerComponent]
+    ]
 })
 export class PrimeBlocksModule { }

src/app/demo/components/uikit/button/buttondemo.component.ts

@@ -1,8 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { RippleModule } from 'primeng/ripple';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
-    templateUrl: './buttondemo.component.html'
+    templateUrl: './buttondemo.component.html',
+    standalone: true,
+    imports: [ButtonModule, RippleModule, SplitButtonModule]
 })
 export class ButtonDemoComponent implements OnInit {
 

src/app/demo/components/uikit/button/buttondemo.module.ts

@@ -8,14 +8,14 @@ import { SplitButtonModule } from 'primeng/splitbutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		ButtonDemoRoutingModule,
+        ButtonDemoRoutingModule,
-		ButtonModule,
+        ButtonModule,
-		RippleModule,
+        RippleModule,
-		SplitButtonModule,
+        SplitButtonModule,
-		ToggleButtonModule,
+        ToggleButtonModule,
-	],
+        ButtonDemoComponent,
-	declarations: [ButtonDemoComponent]
+    ]
 })
 export class ButtonDemoModule { }

src/app/demo/components/uikit/charts/chartsdemo.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
+import { ChartModule } from 'primeng/chart';
 
 @Component({
-    templateUrl: './chartsdemo.component.html'
+    templateUrl: './chartsdemo.component.html',
+    standalone: true,
+    imports: [ChartModule]
 })
 export class ChartsDemoComponent implements OnInit, OnDestroy {
 

src/app/demo/components/uikit/charts/chartsdemo.module.ts

@@ -5,11 +5,11 @@ import { ChartModule } from 'primeng/chart'
 import { ChartsDemoComponent } from './chartsdemo.component';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		ChartsDemoRoutingModule,
+        ChartsDemoRoutingModule,
-		ChartModule
+        ChartModule,
-	],
+        ChartsDemoComponent
-	declarations: [ChartsDemoComponent]
+    ]
 })
 export class ChartsDemoModule { }

src/app/demo/components/uikit/file/filedemo.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
+import { MessageService, SharedModule } from 'primeng/api';
+import { NgIf, NgFor } from '@angular/common';
+import { FileUploadModule } from 'primeng/fileupload';
 
 @Component({
     templateUrl: './filedemo.component.html',
-    providers: [MessageService]
+    providers: [MessageService],
+    standalone: true,
+    imports: [FileUploadModule, SharedModule, NgIf, NgFor]
 })
 export class FileDemoComponent {
 

src/app/demo/components/uikit/file/filedemo.module.ts

@@ -7,12 +7,12 @@ import { FileDemoComponent } from './filedemo.component';
 
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		FileDemoRoutingModule,
+        FileDemoRoutingModule,
-		FileUploadModule
+        FileUploadModule,
-	],
+        FileDemoComponent
-	declarations: [FileDemoComponent],
+    ],
 })
 export class FileDemoModule { }

src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.ts

@@ -1,8 +1,31 @@
 import { Component, OnInit } from '@angular/core';
 import { CountryService } from 'src/app/demo/service/country.service';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { InputMaskModule } from 'primeng/inputmask';
+import { ChipsModule } from 'primeng/chips';
+import { CalendarModule } from 'primeng/calendar';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { InputTextModule } from 'primeng/inputtext';
+import { FormsModule } from '@angular/forms';
 
 @Component({
     templateUrl: './floatlabeldemo.component.html',
+    standalone: true,
+    imports: [
+        FormsModule,
+        InputTextModule,
+        AutoCompleteModule,
+        CalendarModule,
+        ChipsModule,
+        InputMaskModule,
+        InputNumberModule,
+        DropdownModule,
+        MultiSelectModule,
+        InputTextareaModule,
+    ],
 })
 export class FloatLabelDemoComponent implements OnInit {
 

src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts

@@ -15,21 +15,21 @@ import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputTextModule } from "primeng/inputtext";
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		FloatlabelDemoRoutingModule,
+        FloatlabelDemoRoutingModule,
-		AutoCompleteModule,
+        AutoCompleteModule,
-		CalendarModule,
+        CalendarModule,
-		ChipsModule,
+        ChipsModule,
-		DropdownModule,
+        DropdownModule,
-		InputMaskModule,
+        InputMaskModule,
-		InputNumberModule,
+        InputNumberModule,
-		CascadeSelectModule,
+        CascadeSelectModule,
-		MultiSelectModule,
+        MultiSelectModule,
-		InputTextareaModule,
+        InputTextareaModule,
-		InputTextModule
+        InputTextModule,
-	],
+        FloatLabelDemoComponent
-	declarations: [FloatLabelDemoComponent]
+    ]
 })
 export class FloatlabelDemoModule { }

src/app/demo/components/uikit/formlayout/formlayoutdemo.component.ts

@@ -1,7 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
-    templateUrl: './formlayoutdemo.component.html'
+    templateUrl: './formlayoutdemo.component.html',
+    standalone: true,
+    imports: [InputTextModule, ButtonModule, InputTextareaModule, DropdownModule, FormsModule]
 })
 export class FormLayoutDemoComponent {
 

src/app/demo/components/uikit/formlayout/formlayoutdemo.module.ts

@@ -15,21 +15,21 @@ import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputTextModule } from "primeng/inputtext";
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		FormLayoutDemoRoutingModule,
+        FormLayoutDemoRoutingModule,
-		AutoCompleteModule,
+        AutoCompleteModule,
-		CalendarModule,
+        CalendarModule,
-		ChipsModule,
+        ChipsModule,
-		DropdownModule,
+        DropdownModule,
-		InputMaskModule,
+        InputMaskModule,
-		InputNumberModule,
+        InputNumberModule,
-		CascadeSelectModule,
+        CascadeSelectModule,
-		MultiSelectModule,
+        MultiSelectModule,
-		InputTextareaModule,
+        InputTextareaModule,
-		InputTextModule
+        InputTextModule,
-	],
+        FormLayoutDemoComponent
-	declarations: [FormLayoutDemoComponent]
+    ]
 })
 export class FormLayoutDemoModule { }

src/app/demo/components/uikit/input/inputdemo.component.ts

@@ -1,9 +1,31 @@
 import { Component, OnInit } from '@angular/core';
-import { SelectItem } from 'primeng/api';
+import { SelectItem, SharedModule } from 'primeng/api';
 import { CountryService } from 'src/app/demo/service/country.service';
+import { ButtonModule } from 'primeng/button';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { ToggleButtonModule } from 'primeng/togglebutton';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { DropdownModule } from 'primeng/dropdown';
+import { ListboxModule } from 'primeng/listbox';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { CheckboxModule } from 'primeng/checkbox';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { KnobModule } from 'primeng/knob';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import { RatingModule } from 'primeng/rating';
+import { SliderModule } from 'primeng/slider';
+import { ChipsModule } from 'primeng/chips';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { CalendarModule } from 'primeng/calendar';
+import { FormsModule } from '@angular/forms';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
-    templateUrl: './inputdemo.component.html'
+    templateUrl: './inputdemo.component.html',
+    standalone: true,
+    imports: [InputTextModule, InputTextareaModule, AutoCompleteModule, FormsModule, CalendarModule, InputNumberModule, ChipsModule, SliderModule, RatingModule, ColorPickerModule, KnobModule, RadioButtonModule, CheckboxModule, InputSwitchModule, ListboxModule, DropdownModule, MultiSelectModule, SharedModule, ToggleButtonModule, SelectButtonModule, ButtonModule]
 })
 export class InputDemoComponent implements OnInit {
     

src/app/demo/components/uikit/input/inputdemo.module.ts

@@ -27,33 +27,33 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
 import { SliderModule } from 'primeng/slider';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		InputDemoRoutingModule,
+        InputDemoRoutingModule,
-		AutoCompleteModule,
+        AutoCompleteModule,
-		CalendarModule,
+        CalendarModule,
-		ChipsModule,
+        ChipsModule,
-		DropdownModule,
+        DropdownModule,
-		InputMaskModule,
+        InputMaskModule,
-		InputNumberModule,
+        InputNumberModule,
-		ColorPickerModule,
+        ColorPickerModule,
-		CascadeSelectModule,
+        CascadeSelectModule,
-		MultiSelectModule,
+        MultiSelectModule,
-		ToggleButtonModule,
+        ToggleButtonModule,
-		SliderModule,
+        SliderModule,
-		InputTextareaModule,
+        InputTextareaModule,
-		RadioButtonModule,
+        RadioButtonModule,
-		InputTextModule,
+        InputTextModule,
-		RatingModule,
+        RatingModule,
-		ChipModule,
+        ChipModule,
-		KnobModule,
+        KnobModule,
-		InputSwitchModule,
+        InputSwitchModule,
-		ListboxModule,
+        ListboxModule,
-		SelectButtonModule,
+        SelectButtonModule,
-		CheckboxModule,
+        CheckboxModule,
-		ButtonModule
+        ButtonModule,
-	],
+        InputDemoComponent
-	declarations: [InputDemoComponent]
+    ]
 })
 export class InputDemoModule { }

src/app/demo/components/uikit/invalid/invalidstatedemo.component.ts

@@ -1,8 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { CountryService } from 'src/app/demo/service/country.service';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { InputMaskModule } from 'primeng/inputmask';
+import { PasswordModule } from 'primeng/password';
+import { ChipsModule } from 'primeng/chips';
+import { CalendarModule } from 'primeng/calendar';
+import { FormsModule } from '@angular/forms';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
-    templateUrl: './invalidstatedemo.component.html'
+    templateUrl: './invalidstatedemo.component.html',
+    standalone: true,
+    imports: [InputTextModule, AutoCompleteModule, FormsModule, CalendarModule, ChipsModule, PasswordModule, InputMaskModule, InputNumberModule, DropdownModule, MultiSelectModule, InputTextareaModule]
 })
 export class InvalidStateDemoComponent implements OnInit {
 

src/app/demo/components/uikit/invalid/invalidstatedemo.module.ts

@@ -16,22 +16,22 @@ import { InputTextModule } from "primeng/inputtext";
 import { PasswordModule } from "primeng/password";
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		InvalidStateDemoRoutingModule,
+        InvalidStateDemoRoutingModule,
-		AutoCompleteModule,
+        AutoCompleteModule,
-		CalendarModule,
+        CalendarModule,
-		ChipsModule,
+        ChipsModule,
-		DropdownModule,
+        DropdownModule,
-		InputMaskModule,
+        InputMaskModule,
-		InputNumberModule,
+        InputNumberModule,
-		CascadeSelectModule,
+        CascadeSelectModule,
-		MultiSelectModule,
+        MultiSelectModule,
-		PasswordModule,
+        PasswordModule,
-		InputTextareaModule,
+        InputTextareaModule,
-		InputTextModule
+        InputTextModule,
-	],
+        InvalidStateDemoComponent
-	declarations: [InvalidStateDemoComponent]
+    ]
 })
 export class InvalidStateDemoModule { }

src/app/demo/components/uikit/list/listdemo.component.ts

@@ -1,11 +1,20 @@
 import { Component, OnInit } from '@angular/core';
-import { SelectItem } from 'primeng/api';
+import { SelectItem, SharedModule } from 'primeng/api';
-import { DataView } from 'primeng/dataview';
+import { DataView, DataViewModule } from 'primeng/dataview';
 import { Product } from 'src/app/demo/api/product';
 import { ProductService } from 'src/app/demo/service/product.service';
+import { OrderListModule } from 'primeng/orderlist';
+import { PickListModule } from 'primeng/picklist';
+import { ButtonModule } from 'primeng/button';
+import { FormsModule } from '@angular/forms';
+import { RatingModule } from 'primeng/rating';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
 
 @Component({
-    templateUrl: './listdemo.component.html'
+    templateUrl: './listdemo.component.html',
+    standalone: true,
+    imports: [DataViewModule, SharedModule, DropdownModule, InputTextModule, RatingModule, FormsModule, ButtonModule, PickListModule, OrderListModule]
 })
 export class ListDemoComponent implements OnInit {
 

src/app/demo/components/uikit/list/listdemo.module.ts

@@ -12,18 +12,18 @@ import { RatingModule } from 'primeng/rating';
 import { ButtonModule } from 'primeng/button';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		ListDemoRoutingModule,
+        ListDemoRoutingModule,
-		DataViewModule,
+        DataViewModule,
-		PickListModule,
+        PickListModule,
-		OrderListModule,
+        OrderListModule,
-		InputTextModule,
+        InputTextModule,
-		DropdownModule,
+        DropdownModule,
-		RatingModule,
+        RatingModule,
-		ButtonModule
+        ButtonModule,
-	],
+        ListDemoComponent
-	declarations: [ListDemoComponent]
+    ]
 })
 export class ListDemoModule { }

src/app/demo/components/uikit/media/mediademo.component.ts

@@ -2,9 +2,16 @@ import { Component, OnInit } 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';
+import { GalleriaModule } from 'primeng/galleria';
+import { ImageModule } from 'primeng/image';
+import { ButtonModule } from 'primeng/button';
+import { SharedModule } from 'primeng/api';
+import { CarouselModule } from 'primeng/carousel';
 
 @Component({
-    templateUrl: './mediademo.component.html'
+    templateUrl: './mediademo.component.html',
+    standalone: true,
+    imports: [CarouselModule, SharedModule, ButtonModule, ImageModule, GalleriaModule]
 })
 export class MediaDemoComponent implements OnInit {
 

src/app/demo/components/uikit/media/mediademo.module.ts

@@ -8,14 +8,14 @@ import { GalleriaModule } from 'primeng/galleria';
 import { CarouselModule } from 'primeng/carousel';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		MediaDemoRoutingModule,
+        MediaDemoRoutingModule,
-		ButtonModule,
+        ButtonModule,
-		ImageModule,
+        ImageModule,
-		GalleriaModule,
+        GalleriaModule,
-		CarouselModule
+        CarouselModule,
-	],
+        MediaDemoComponent
-	declarations: [MediaDemoComponent]
+    ]
 })
 export class MediaDemoModule { }

src/app/demo/components/uikit/menus/menus.component.ts

@@ -1,5 +1,17 @@
 import { Component, OnInit } from '@angular/core';
-import { MegaMenuItem, MenuItem } from 'primeng/api';
+import { MegaMenuItem, MenuItem, SharedModule } from 'primeng/api';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { MegaMenuModule } from 'primeng/megamenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { ButtonModule } from 'primeng/button';
+import { MenuModule } from 'primeng/menu';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { RouterOutlet } from '@angular/router';
+import { StepsModule } from 'primeng/steps';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { InputTextModule } from 'primeng/inputtext';
+import { MenubarModule } from 'primeng/menubar';
 
 @Component({
     templateUrl: './menus.component.html',
@@ -7,7 +19,9 @@ import { MegaMenuItem, MenuItem } from 'primeng/api';
         :host ::ng-deep .p-menubar-root-list {
             flex-wrap: wrap;
         }
-    `]
+    `],
+    standalone: true,
+    imports: [MenubarModule, SharedModule, InputTextModule, BreadcrumbModule, TabMenuModule, StepsModule, RouterOutlet, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule]
 })
 export class MenusComponent implements OnInit {
 

src/app/demo/components/uikit/menus/menus.module.ts

@@ -18,32 +18,32 @@ import { MegaMenuModule } from 'primeng/megamenu';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { InputTextModule } from 'primeng/inputtext';
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		BreadcrumbModule,
+        BreadcrumbModule,
-		MenubarModule,
+        MenubarModule,
-		TabMenuModule,
+        TabMenuModule,
-		StepsModule,
+        StepsModule,
-		TieredMenuModule,
+        TieredMenuModule,
-		MenuModule,
+        MenuModule,
-		ButtonModule,
+        ButtonModule,
-		ContextMenuModule,
+        ContextMenuModule,
-		MegaMenuModule,
+        MegaMenuModule,
-		PanelMenuModule,
+        PanelMenuModule,
-		InputTextModule,
+        InputTextModule,
-		RouterModule.forChild([
+        RouterModule.forChild([
-			{
+            {
-				path: '', component: MenusComponent, children: [
+                path: '', component: MenusComponent, children: [
-					{ path: '', redirectTo: 'personal', pathMatch: 'full' },
+                    { path: '', redirectTo: 'personal', pathMatch: 'full' },
-					{ path: 'personal', component: PersonalComponent },
+                    { path: 'personal', component: PersonalComponent },
-					{ path: 'confirmation', component: ConfirmationComponent },
+                    { path: 'confirmation', component: ConfirmationComponent },
-					{ path: 'seat', component: SeatComponent },
+                    { path: 'seat', component: SeatComponent },
-					{ path: 'payment', component: PaymentComponent }
+                    { path: 'payment', component: PaymentComponent }
-				]
+                ]
-			}
+            }
-		])
+        ]),
-	],
+        MenusComponent
-	declarations: [MenusComponent],
+    ],
-	exports: [RouterModule]
+    exports: [RouterModule]
 })
 export class MenusModule { }

src/app/demo/components/uikit/messages/messagesdemo.component.ts

@@ -1,9 +1,16 @@
 import { Component } from '@angular/core';
 import { Message, MessageService } from 'primeng/api';
+import { MessageModule } from 'primeng/message';
+import { InputTextModule } from 'primeng/inputtext';
+import { MessagesModule } from 'primeng/messages';
+import { ButtonModule } from 'primeng/button';
+import { ToastModule } from 'primeng/toast';
 
 @Component({
     templateUrl: './messagesdemo.component.html',
-    providers: [MessageService]
+    providers: [MessageService],
+    standalone: true,
+    imports: [ToastModule, ButtonModule, MessagesModule, InputTextModule, MessageModule]
 })
 export class MessagesDemoComponent {
 

src/app/demo/components/uikit/messages/messagesdemo.module.ts

@@ -9,15 +9,15 @@ import { ToastModule } from 'primeng/toast';
 import { InputTextModule } from 'primeng/inputtext';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		MessagesDemoRoutingModule,
+        MessagesDemoRoutingModule,
-		MessagesModule,
+        MessagesModule,
-		MessageModule,
+        MessageModule,
-		ButtonModule,
+        ButtonModule,
-		ToastModule,
+        ToastModule,
-		InputTextModule
+        InputTextModule,
-	],
+        MessagesDemoComponent
-	declarations: [MessagesDemoComponent]
+    ]
 })
 export class MessagesDemoModule { }

src/app/demo/components/uikit/misc/miscdemo.component.ts

@@ -1,7 +1,19 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SkeletonModule } from 'primeng/skeleton';
+import { ChipModule } from 'primeng/chip';
+import { TagModule } from 'primeng/tag';
+import { ScrollTopModule } from 'primeng/scrolltop';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
+import { ButtonModule } from 'primeng/button';
+import { BadgeModule } from 'primeng/badge';
+import { ProgressBarModule } from 'primeng/progressbar';
 
 @Component({
-    templateUrl: './miscdemo.component.html'
+    templateUrl: './miscdemo.component.html',
+    standalone: true,
+    imports: [ProgressBarModule, BadgeModule, ButtonModule, AvatarGroupModule, AvatarModule, ScrollPanelModule, ScrollTopModule, TagModule, ChipModule, SkeletonModule]
 })
 export class MiscDemoComponent implements OnInit, OnDestroy {
 

src/app/demo/components/uikit/misc/miscdemo.module.ts

@@ -14,20 +14,20 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
 import { ScrollTopModule } from 'primeng/scrolltop';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		MiscDemoRoutingModule,
+        MiscDemoRoutingModule,
-		ProgressBarModule,
+        ProgressBarModule,
-		BadgeModule,
+        BadgeModule,
-		AvatarModule,
+        AvatarModule,
-		ScrollPanelModule,
+        ScrollPanelModule,
-		TagModule,
+        TagModule,
-		ChipModule,
+        ChipModule,
-		ButtonModule,
+        ButtonModule,
-		SkeletonModule,
+        SkeletonModule,
-		AvatarGroupModule,
+        AvatarGroupModule,
-		ScrollTopModule
+        ScrollTopModule,
-	],
+        MiscDemoComponent
-	declarations: [MiscDemoComponent]
+    ]
 })
 export class MiscDemoModule { }

src/app/demo/components/uikit/overlays/overlaysdemo.component.ts

@@ -1,11 +1,24 @@
 import { Component, OnInit } from '@angular/core';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService, SharedModule } from 'primeng/api';
 import { Product } from 'src/app/demo/api/product';
 import { ProductService } from 'src/app/demo/service/product.service';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { RippleModule } from 'primeng/ripple';
+import { TooltipModule } from 'primeng/tooltip';
+import { InputTextModule } from 'primeng/inputtext';
+import { SidebarModule } from 'primeng/sidebar';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { TableModule } from 'primeng/table';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { ToastModule } from 'primeng/toast';
 
 @Component({
     templateUrl: './overlaysdemo.component.html',
-    providers: [ConfirmationService, MessageService]
+    providers: [ConfirmationService, MessageService],
+    standalone: true,
+    imports: [ToastModule, DialogModule, SharedModule, ButtonModule, OverlayPanelModule, TableModule, ConfirmDialogModule, SidebarModule, InputTextModule, TooltipModule, RippleModule, ConfirmPopupModule]
 })
 export class OverlaysDemoComponent implements OnInit {
 

src/app/demo/components/uikit/overlays/overlaysdemo.module.ts

@@ -15,22 +15,22 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { TooltipModule } from 'primeng/tooltip';
 import { InputTextModule } from 'primeng/inputtext';
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		OverlaysDemoRoutingModule,
+        OverlaysDemoRoutingModule,
-		ToastModule,
+        ToastModule,
-		DialogModule,
+        DialogModule,
-		FormsModule,
+        FormsModule,
-		TooltipModule,
+        TooltipModule,
-		InputTextModule,
+        InputTextModule,
-		ButtonModule,
+        ButtonModule,
-		OverlayPanelModule,
+        OverlayPanelModule,
-		TableModule,
+        TableModule,
-		ConfirmDialogModule,
+        ConfirmDialogModule,
-		SidebarModule,
+        SidebarModule,
-		RippleModule,
+        RippleModule,
-		ConfirmPopupModule
+        ConfirmPopupModule,
-	],
+        OverlaysDemoComponent
-	declarations: [OverlaysDemoComponent]
+    ]
 })
 export class OverlaysDemoModule { }

src/app/demo/components/uikit/panels/panelsdemo.component.ts

@@ -1,8 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem, SharedModule } from 'primeng/api';
+import { SplitterModule } from 'primeng/splitter';
+import { DividerModule } from 'primeng/divider';
+import { InputTextModule } from 'primeng/inputtext';
+import { MenuModule } from 'primeng/menu';
+import { FieldsetModule } from 'primeng/fieldset';
+import { PanelModule } from 'primeng/panel';
+import { TabViewModule } from 'primeng/tabview';
+import { AccordionModule } from 'primeng/accordion';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { ButtonModule } from 'primeng/button';
+import { ToolbarModule } from 'primeng/toolbar';
 
 @Component({
-    templateUrl: './panelsdemo.component.html'
+    templateUrl: './panelsdemo.component.html',
+    standalone: true,
+    imports: [ToolbarModule, ButtonModule, SplitButtonModule, AccordionModule, TabViewModule, PanelModule, FieldsetModule, MenuModule, InputTextModule, DividerModule, SplitterModule, SharedModule]
 })
 export class PanelsDemoComponent implements OnInit {
 

src/app/demo/components/uikit/panels/panelsdemo.module.ts

@@ -17,23 +17,23 @@ import { SplitterModule } from 'primeng/splitter';
 import { PanelModule } from 'primeng/panel';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		FormsModule,
+        FormsModule,
-		PanelsDemoRoutingModule,
+        PanelsDemoRoutingModule,
-		ToolbarModule,
+        ToolbarModule,
-		ButtonModule,
+        ButtonModule,
-		RippleModule,
+        RippleModule,
-		SplitButtonModule,
+        SplitButtonModule,
-		AccordionModule,
+        AccordionModule,
-		TabViewModule,
+        TabViewModule,
-		FieldsetModule,
+        FieldsetModule,
-		MenuModule,
+        MenuModule,
-		InputTextModule,
+        InputTextModule,
-		DividerModule,
+        DividerModule,
-		SplitterModule,
+        SplitterModule,
-		PanelModule
+        PanelModule,
-	],
+        PanelsDemoComponent
-	declarations: [PanelsDemoComponent]
+    ]
 })
 export class PanelsDemoModule { }

src/app/demo/components/uikit/table/tabledemo.component.ts

@@ -3,8 +3,20 @@ 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';
 import { ProductService } from 'src/app/demo/service/product.service';
-import { Table } from 'primeng/table';
+import { Table, TableModule } from 'primeng/table';
-import { MessageService, ConfirmationService } from 'primeng/api';
+import { MessageService, ConfirmationService, SharedModule } from 'primeng/api';
+import { RatingModule } from 'primeng/rating';
+import { RippleModule } from 'primeng/ripple';
+import { ToastModule } from 'primeng/toast';
+import { ToggleButtonModule } from 'primeng/togglebutton';
+import { NgClass, NgIf, CurrencyPipe, DatePipe } from '@angular/common';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { SliderModule } from 'primeng/slider';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
 
 interface expandedRows {
     [key: string]: boolean;
@@ -12,7 +24,9 @@ interface expandedRows {
 
 @Component({
     templateUrl: './tabledemo.component.html',
-    providers: [MessageService, ConfirmationService]
+    providers: [MessageService, ConfirmationService],
+    standalone: true,
+    imports: [TableModule, SharedModule, ButtonModule, InputTextModule, MultiSelectModule, FormsModule, DropdownModule, SliderModule, ProgressBarModule, NgClass, ToggleButtonModule, ToastModule, RippleModule, RatingModule, NgIf, CurrencyPipe, DatePipe]
 })
 export class TableDemoComponent implements OnInit {
 

src/app/demo/components/uikit/table/tabledemo.module.ts

@@ -16,22 +16,22 @@ import { SliderModule } from 'primeng/slider';
 import { RatingModule } from 'primeng/rating';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		TableDemoRoutingModule,
+        TableDemoRoutingModule,
-		FormsModule,
+        FormsModule,
-		TableModule,
+        TableModule,
-		RatingModule,
+        RatingModule,
-		ButtonModule,
+        ButtonModule,
-		SliderModule,
+        SliderModule,
-		InputTextModule,
+        InputTextModule,
-		ToggleButtonModule,
+        ToggleButtonModule,
-		RippleModule,
+        RippleModule,
-		MultiSelectModule,
+        MultiSelectModule,
-		DropdownModule,
+        DropdownModule,
-		ProgressBarModule,
+        ProgressBarModule,
-		ToastModule
+        ToastModule,
-	],
+        TableDemoComponent
-	declarations: [TableDemoComponent]
+    ]
 })
 export class TableDemoModule { }

src/app/demo/components/uikit/tree/treedemo.component.ts

@@ -1,9 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { NodeService } from 'src/app/demo/service/node.service';
-import { TreeNode} from 'primeng/api';
+import { TreeNode, SharedModule } from 'primeng/api';
+import { NgFor, NgIf } from '@angular/common';
+import { TreeTableModule } from 'primeng/treetable';
+import { TreeModule } from 'primeng/tree';
 
 @Component({
-    templateUrl: './treedemo.component.html'
+    templateUrl: './treedemo.component.html',
+    standalone: true,
+    imports: [TreeModule, TreeTableModule, SharedModule, NgFor, NgIf]
 })
 export class TreeDemoComponent implements OnInit {
 

src/app/demo/components/uikit/tree/treedemo.module.ts

@@ -7,13 +7,13 @@ import { TreeModule } from 'primeng/tree';
 import { TreeTableModule } from 'primeng/treetable';
 
 @NgModule({
-	imports: [
+    imports: [
-		CommonModule,
+        CommonModule,
-		TreeDemoRoutingModule,
+        TreeDemoRoutingModule,
-		FormsModule,
+        FormsModule,
-		TreeModule,
+        TreeModule,
-		TreeTableModule
+        TreeTableModule,
-	],
+        TreeDemoComponent
-	declarations: [TreeDemoComponent],
+    ],
 })
 export class TreeDemoModule { }

src/app/demo/components/utilities/icons/icons.component.ts

@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { IconService } from 'src/app/demo/service/icon.service';
+import { NgFor } from '@angular/common';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
     templateUrl: './icons.component.html',
+    standalone: true,
+    imports: [InputTextModule, NgFor],
 })
 export class IconsComponent implements OnInit {
 

src/app/demo/components/utilities/utilities.module.ts

@@ -8,8 +8,8 @@ import { InputTextModule } from 'primeng/inputtext';
     imports: [
         CommonModule,
         UtilitiesRoutingModule,
-        InputTextModule
+        InputTextModule,
-    ],
+        IconsComponent
-    declarations: [IconsComponent]
+    ]
 })
 export class UtilitiesModule { }

src/app/layout/app.footer.component.ts

@@ -3,7 +3,8 @@ import { LayoutService } from "./service/app.layout.service";
 
 @Component({
     selector: 'app-footer',
-    templateUrl: './app.footer.component.html'
+    templateUrl: './app.footer.component.html',
+    standalone: true
 })
 export class AppFooterComponent {
     constructor(public layoutService: LayoutService) { }

src/app/layout/app.layout.component.ts

@@ -1,13 +1,18 @@
 import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter, Subscription } from 'rxjs';
 import { LayoutService } from "./service/app.layout.service";
 import { AppSidebarComponent } from "./app.sidebar.component";
 import { AppTopBarComponent } from './app.topbar.component';
+import { AppConfigComponent } from './config/app.config.component';
+import { AppFooterComponent } from './app.footer.component';
+import { NgClass } from '@angular/common';
 
 @Component({
     selector: 'app-layout',
-    templateUrl: './app.layout.component.html'
+    templateUrl: './app.layout.component.html',
+    standalone: true,
+    imports: [NgClass, AppTopBarComponent, AppSidebarComponent, RouterOutlet, AppFooterComponent, AppConfigComponent]
 })
 export class AppLayoutComponent implements OnDestroy {
 

src/app/layout/app.layout.module.ts

@@ -19,14 +19,6 @@ import { AppSidebarComponent } from "./app.sidebar.component";
 import { AppLayoutComponent } from "./app.layout.component";
 
 @NgModule({
-    declarations: [
-        AppMenuitemComponent,
-        AppTopBarComponent,
-        AppFooterComponent,
-        AppMenuComponent,
-        AppSidebarComponent,
-        AppLayoutComponent,
-    ],
     imports: [
         BrowserModule,
         FormsModule,
@@ -39,7 +31,13 @@ import { AppLayoutComponent } from "./app.layout.component";
         InputSwitchModule,
         RippleModule,
         RouterModule,
-        AppConfigModule
+        AppConfigModule,
+        AppMenuitemComponent,
+        AppTopBarComponent,
+        AppFooterComponent,
+        AppMenuComponent,
+        AppSidebarComponent,
+        AppLayoutComponent
     ],
     exports: [AppLayoutComponent]
 })

src/app/layout/app.menu.component.ts

@@ -1,10 +1,14 @@
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 import { LayoutService } from './service/app.layout.service';
+import { AppMenuitemComponent } from './app.menuitem.component';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
     selector: 'app-menu',
-    templateUrl: './app.menu.component.html'
+    templateUrl: './app.menu.component.html',
+    standalone: true,
+    imports: [NgFor, NgIf, AppMenuitemComponent]
 })
 export class AppMenuComponent implements OnInit {
 

src/app/layout/app.menuitem.component.ts

@@ -1,10 +1,12 @@
-import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit, forwardRef } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterLinkActive, RouterLink } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { MenuService } from './app.menu.service';
 import { LayoutService } from './service/app.layout.service';
+import { RippleModule } from 'primeng/ripple';
+import { NgIf, NgClass, NgFor } from '@angular/common';
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
@@ -45,7 +47,9 @@ import { LayoutService } from './service/app.layout.service';
             })),
             transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
         ])
-    ]
+    ],
+    standalone: true,
+    imports: [NgIf, RippleModule, NgClass, RouterLinkActive, RouterLink, NgFor, forwardRef(() => AppMenuitemComponent)]
 })
 export class AppMenuitemComponent implements OnInit, OnDestroy {
 

src/app/layout/app.sidebar.component.ts

@@ -1,9 +1,12 @@
 import { Component, ElementRef } from '@angular/core';
 import { LayoutService } from "./service/app.layout.service";
+import { AppMenuComponent } from './app.menu.component';
 
 @Component({
     selector: 'app-sidebar',
-    templateUrl: './app.sidebar.component.html'
+    templateUrl: './app.sidebar.component.html',
+    standalone: true,
+    imports: [AppMenuComponent]
 })
 export class AppSidebarComponent {
     constructor(public layoutService: LayoutService, public el: ElementRef) { }

src/app/layout/app.topbar.component.ts

@@ -1,10 +1,14 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { LayoutService } from "./service/app.layout.service";
+import { NgClass } from '@angular/common';
+import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'app-topbar',
-    templateUrl: './app.topbar.component.html'
+    templateUrl: './app.topbar.component.html',
+    standalone: true,
+    imports: [RouterLink, NgClass]
 })
 export class AppTopBarComponent {
 

src/app/layout/config/app.config.component.ts

@@ -1,10 +1,18 @@
 import { Component, Input } from '@angular/core';
 import { LayoutService } from "../service/app.layout.service";
 import { MenuService } from "../app.menu.service";
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { FormsModule } from '@angular/forms';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { NgFor, NgClass, NgIf } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+import { SidebarModule } from 'primeng/sidebar';
 
 @Component({
     selector: 'app-config',
-    templateUrl: './app.config.component.html'
+    templateUrl: './app.config.component.html',
+    standalone: true,
+    imports: [SidebarModule, ButtonModule, NgFor, NgClass, NgIf, RadioButtonModule, FormsModule, InputSwitchModule]
 })
 export class AppConfigComponent {
 

src/app/layout/config/config.module.ts

@@ -14,9 +14,7 @@ import { AppConfigComponent } from './app.config.component';
         SidebarModule,
         RadioButtonModule,
         ButtonModule,
-        InputSwitchModule
+        InputSwitchModule,
-    ],
-    declarations: [
         AppConfigComponent
     ],
     exports: [