- - @prev (default)
- - @next
- - @parent
- - @grandparent
+ - @prev (default)
+ - @next
+ - @parent
+ - @grandparent
- Use CSS selector
- Use () => HTMLElement
diff --git a/src/app/showcase/doc/styleclass/toggleclassdoc.ts b/src/app/showcase/doc/styleclass/toggleclassdoc.ts
index 156352689a8..04c7bab1c75 100644
--- a/src/app/showcase/doc/styleclass/toggleclassdoc.ts
+++ b/src/app/showcase/doc/styleclass/toggleclassdoc.ts
@@ -7,7 +7,7 @@ import { Code } from '../../domain/code';
StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or
- keywords including @next, prev, parent, grandparent
+ keywords including @next, prev, parent, grandparent
diff --git a/src/app/showcase/layout/app.component.scss b/src/app/showcase/layout/app.component.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
index 1c065767050..df8ed64422b 100644
--- a/src/app/showcase/layout/app.component.ts
+++ b/src/app/showcase/layout/app.component.ts
@@ -1,20 +1,41 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { AppConfigService } from '../service/appconfigservice';
import Announcement from '../data/news.json';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+import { CarService } from '../service/carservice';
+import { CountryService } from '../service/countryservice';
+import { CustomerService } from '../service/customerservice';
+import { EventService } from '../service/eventservice';
+import { IconService } from '../service/iconservice';
+import { NodeService } from '../service/nodeservice';
+import { PhotoService } from '../service/photoservice';
+import { ProductService } from '../service/productservice';
+import { AppMainComponent } from './app.main.component';
+import { AppTopBarComponent } from './topbar/app.topbar.component';
+import { AppNewsComponent } from './news/app.news.component';
+import { AppConfigComponent } from './config/app.config.component';
+import { AppMenuComponent } from './menu/app.menu.component';
+import { LandingComponent } from '../pages/landing/landing.component';
@Component({
selector: 'app-root',
- templateUrl: './app.component.html'
+ templateUrl: './app.component.html',
+ standalone: true,
+ imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent],
+ providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService]
})
export class AppComponent implements OnInit, OnDestroy {
constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private configService: AppConfigService, private router: Router) {
if (isPlatformBrowser(platformId) && window && process.env.NODE_ENV === 'production') {
this.injectScripts();
}
- this.handleRouteEvents();
+ isPlatformBrowser(this.platformId) && this.handleRouteEvents();
}
public subscription: Subscription;
diff --git a/src/app/showcase/layout/app.config.server.ts b/src/app/showcase/layout/app.config.server.ts
new file mode 100644
index 00000000000..b4d57c94235
--- /dev/null
+++ b/src/app/showcase/layout/app.config.server.ts
@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+ providers: [
+ provideServerRendering()
+ ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/src/app/showcase/layout/app.config.ts b/src/app/showcase/layout/app.config.ts
new file mode 100644
index 00000000000..5b017287368
--- /dev/null
+++ b/src/app/showcase/layout/app.config.ts
@@ -0,0 +1,15 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withDisabledInitialNavigation, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
+ provideHttpClient(withFetch()),
+ provideAnimationsAsync(),
+ ]
+};
diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts
index ec4ad4d448b..bf5e71f9483 100644
--- a/src/app/showcase/layout/app.main.component.ts
+++ b/src/app/showcase/layout/app.main.component.ts
@@ -1,16 +1,23 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
import { PrimeNGConfig } from 'primeng/api';
import { Subscription } from 'rxjs';
import { AppConfig } from '../domain/appconfig';
import { AppConfigService } from '../service/appconfigservice';
import { AppComponent } from './app.component';
import { DomHandler } from 'primeng/dom';
+import { AppFooterComponent } from './footer/app.footer.component';
+import { AppMenuComponent } from './menu/app.menu.component';
+import { AppConfigComponent } from './config/app.config.component';
+import { AppTopBarComponent } from './topbar/app.topbar.component';
+import { AppNewsComponent } from './news/app.news.component';
@Component({
selector: 'app-main',
- templateUrl: './app.main.component.html'
+ templateUrl: './app.main.component.html',
+ standalone: true,
+ imports: [RouterOutlet, AppFooterComponent, CommonModule, AppNewsComponent, AppMenuComponent, AppConfigComponent, AppTopBarComponent]
})
export class AppMainComponent implements OnInit {
menuActive: boolean;
diff --git a/src/app/showcase/layout/app.module.ts b/src/app/showcase/layout/app.module.ts
deleted file mode 100644
index 4c97c3d5d47..00000000000
--- a/src/app/showcase/layout/app.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { AppRoutingModule } from './app-routing.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppComponent } from './app.component';
-
-import { CarService } from '../service/carservice';
-import { CountryService } from '../service/countryservice';
-import { EventService } from '../service/eventservice';
-import { NodeService } from '../service/nodeservice';
-
-import { AppConfigService } from '../service/appconfigservice';
-import { CustomerService } from '../service/customerservice';
-import { IconService } from '../service/iconservice';
-import { PhotoService } from '../service/photoservice';
-import { ProductService } from '../service/productservice';
-
-import { LandingModule } from '../pages/landing/landing.module';
-import { AppMainComponent } from './app.main.component';
-import { AppConfigModule } from '../layout//config/app.config.module';
-import { AppFooterComponent } from '../layout/footer/app.footer.component';
-import { AppMenuModule } from '../layout//menu/app.menu.module';
-import { AppNewsModule } from '../layout/news/app.news.module';
-import { AppTopbarModule } from '../layout/topbar/app.topbar.module';
-import { LocationStrategy, PathLocationStrategy } from '@angular/common';
-
-@NgModule({
- declarations: [AppComponent, AppFooterComponent, AppMainComponent],
- imports: [BrowserModule.withServerTransition({ appId: 'primeng' }), AppRoutingModule, FormsModule, ReactiveFormsModule, AppNewsModule, HttpClientModule, BrowserAnimationsModule, LandingModule, AppConfigModule, AppTopbarModule, AppMenuModule],
- providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }, CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService],
- bootstrap: [AppComponent]
-})
-export class AppModule {}
diff --git a/src/app/showcase/layout/app-routing.module.ts b/src/app/showcase/layout/app.routes.ts
similarity index 97%
rename from src/app/showcase/layout/app-routing.module.ts
rename to src/app/showcase/layout/app.routes.ts
index d7f4225123f..feb39622193 100644
--- a/src/app/showcase/layout/app-routing.module.ts
+++ b/src/app/showcase/layout/app.routes.ts
@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
import { LandingComponent } from '../pages/landing/landing.component';
import { AppMainComponent } from './app.main.component';
-const routes: Routes = [
+export const routes: Routes = [
{ path: '', component: LandingComponent, pathMatch: 'full' },
{
path: '',
@@ -121,16 +120,4 @@ const routes: Routes = [
},
{ path: 'notfound', loadChildren: () => import('../pages/notfound/notfound.module').then((m) => m.NotFoundModule) },
{ path: '**', redirectTo: '/notfound' }
-];
-
-const routerOptions: ExtraOptions = {
- anchorScrolling: 'enabled',
- scrollPositionRestoration: 'enabled',
- initialNavigation: 'enabledBlocking'
-};
-
-@NgModule({
- imports: [RouterModule.forRoot(routes, routerOptions)],
- exports: [RouterModule]
-})
-export class AppRoutingModule {}
+];
\ No newline at end of file
diff --git a/src/app/showcase/layout/app.server.module.ts b/src/app/showcase/layout/app.server.module.ts
deleted file mode 100644
index 0b0bec172d0..00000000000
--- a/src/app/showcase/layout/app.server.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
-
-import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [AppModule, ServerModule],
- bootstrap: [AppComponent]
-})
-export class AppServerModule {}
diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts
index 57e4d269e04..9204aae6ec8 100644
--- a/src/app/showcase/layout/config/app.config.component.ts
+++ b/src/app/showcase/layout/config/app.config.component.ts
@@ -1,14 +1,21 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';
import { DomHandler } from 'primeng/dom';
import { Subscription } from 'rxjs';
import { AppConfig } from '../../domain/appconfig';
import { AppConfigService } from '../../service/appconfigservice';
+import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { SidebarModule } from 'primeng/sidebar';
@Component({
selector: 'app-config',
- templateUrl: './app.config.component.html'
+ standalone: true,
+ templateUrl: './app.config.component.html',
+ imports: [CommonModule, FormsModule, SidebarModule, InputSwitchModule, ButtonModule, RadioButtonModule]
})
export class AppConfigComponent implements OnInit, OnDestroy {
scale: number = 14;
diff --git a/src/app/showcase/layout/config/app.config.module.ts b/src/app/showcase/layout/config/app.config.module.ts
deleted file mode 100644
index 656f7ff2f7f..00000000000
--- a/src/app/showcase/layout/config/app.config.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { SidebarModule } from 'primeng/sidebar';
-import { AppConfigComponent } from './app.config.component';
-
-@NgModule({
- imports: [CommonModule, FormsModule, SidebarModule, InputSwitchModule, ButtonModule, RadioButtonModule],
- exports: [AppConfigComponent],
- declarations: [AppConfigComponent]
-})
-export class AppConfigModule {}
diff --git a/src/app/showcase/layout/doc/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/app.docsection-nav.component.ts
index c85e5ee24e5..f8a6b1550d5 100644
--- a/src/app/showcase/layout/doc/app.docsection-nav.component.ts
+++ b/src/app/showcase/layout/doc/app.docsection-nav.component.ts
@@ -1,6 +1,6 @@
-import { DOCUMENT, Location } from '@angular/common';
+import { DOCUMENT, Location, isPlatformBrowser } from '@angular/common';
import { Router } from '@angular/router';
-import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewChild } from '@angular/core';
import { DomHandler } from 'primeng/dom';
import { ObjectUtils } from 'primeng/utils';
import { Subscription } from 'rxjs';
@@ -55,10 +55,10 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
@ViewChild('nav') nav: ElementRef;
- constructor(@Inject(DOCUMENT) private document: Document, private location: Location, private zone: NgZone, private renderer: Renderer2, private router: Router) {}
+ constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private location: Location, private zone: NgZone, private renderer: Renderer2, private router: Router) {}
ngOnInit(): void {
- if (typeof window !== undefined) {
+ if (isPlatformBrowser(this.platformId)) {
const hash = window.location.hash.substring(1);
const hasHash = ObjectUtils.isNotEmpty(hash);
const id = hasHash ? hash : ((this.docs && this.docs[0]) || {}).id;
@@ -94,7 +94,7 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
}
onScroll() {
- if (typeof window !== undefined && this.nav) {
+ if (isPlatformBrowser(this.platformId) && this.nav) {
if (!this.isScrollBlocked) {
if (typeof document !== undefined) {
const labels = this.getLabels();
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index b8a9e7ec85f..233128e9fa1 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -15,7 +15,7 @@ export interface Props {
const app_dependencies = pkg ? pkg.devDependencies : {};
const PrimeNG = {
- version: '16.9.1',
+ version: '17.0.0-beta.1',
description:
'PrimeNG is an open source UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
};
diff --git a/src/app/showcase/layout/footer/app.footer.component.ts b/src/app/showcase/layout/footer/app.footer.component.ts
index 67ef29c14bc..e1ea5035de6 100644
--- a/src/app/showcase/layout/footer/app.footer.component.ts
+++ b/src/app/showcase/layout/footer/app.footer.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
+ standalone: true,
template: `