-
-
-
Hello, {{ title }}
-
Congratulations! Your app is running. 🎉
-
-
-
-
- @for (item of [
- { title: 'Explore the Docs', link: 'https://angular.dev' },
- { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
- { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
- { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
- { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
- ]; track item.title) {
-
- {{ item.title }}
-
-
- }
-
-
+
+ Hello world!
+
+
PrimeNG Playground
+
+
{{msg}}
-
-
-
-
-
-
-
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 34be215..e41a04d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,35 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {InputTextModule} from 'primeng/inputtext';
+import {ButtonModule} from 'primeng/button';
+import {MessageModule} from 'primeng/message';
+import {FormsModule} from '@angular/forms';
+import {BarComponent} from './component/bar/bar.component';
+import {ItemsComponent} from './component/items/items.component';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ standalone: true,
+ imports: [
+ CommonModule,
+ RouterOutlet,
+ InputTextModule,
+ ButtonModule,
+ MessageModule,
+ FormsModule,
+ BarComponent,
+ ItemsComponent
+ ],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
- title = 'dex-ui';
+ text = '';
+
+ msg = '';
+
+ onClick() {
+ this.msg = 'Welcome ' + this.text;
+ }
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index a1e7d6f..68d9575 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,8 +1,19 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
+import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import {provideRouter} from '@angular/router';
+import {routes} from './app.routes';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import {providePrimeNG} from 'primeng/config';
+import Aura from '@primeng/themes/aura';
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+ providers: [
+ provideZoneChangeDetection({eventCoalescing: true}),
+ provideRouter(routes),
+ provideAnimationsAsync(),
+ providePrimeNG({
+ theme: {
+ preset: Aura
+ }
+ })
+ ]
};
diff --git a/src/app/component/bar/bar.component.css b/src/app/component/bar/bar.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/component/bar/bar.component.html b/src/app/component/bar/bar.component.html
new file mode 100644
index 0000000..058691f
--- /dev/null
+++ b/src/app/component/bar/bar.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/component/bar/bar.component.spec.ts b/src/app/component/bar/bar.component.spec.ts
new file mode 100644
index 0000000..ca52916
--- /dev/null
+++ b/src/app/component/bar/bar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarComponent } from './bar.component';
+
+describe('BarComponent', () => {
+ let component: BarComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BarComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(BarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/bar/bar.component.ts b/src/app/component/bar/bar.component.ts
new file mode 100644
index 0000000..7f057bb
--- /dev/null
+++ b/src/app/component/bar/bar.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-bar',
+ imports: [],
+ templateUrl: './bar.component.html',
+ styleUrl: './bar.component.css'
+})
+export class BarComponent {
+
+}
diff --git a/src/app/component/items/items.component.css b/src/app/component/items/items.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/component/items/items.component.html b/src/app/component/items/items.component.html
new file mode 100644
index 0000000..9154b32
--- /dev/null
+++ b/src/app/component/items/items.component.html
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/app/component/items/items.component.spec.ts b/src/app/component/items/items.component.spec.ts
new file mode 100644
index 0000000..a7533eb
--- /dev/null
+++ b/src/app/component/items/items.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemsComponent } from './items.component';
+
+describe('ItemsComponent', () => {
+ let component: ItemsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ItemsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ItemsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/items/items.component.ts b/src/app/component/items/items.component.ts
new file mode 100644
index 0000000..7473a10
--- /dev/null
+++ b/src/app/component/items/items.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import {Scroller} from 'primeng/scroller';
+import {NgClass, NgForOf} from '@angular/common';
+import {Card} from 'primeng/card';
+
+@Component({
+ selector: 'app-items',
+ imports: [
+ Scroller,
+ NgClass,
+ Card,
+ NgForOf
+ ],
+ templateUrl: './items.component.html',
+ styleUrl: './items.component.css'
+})
+export class ItemsComponent {
+ items: string[] = this.test();
+
+ test() {
+ const items = [];
+
+ for (let i = 0; i < 1000 ; i++) {
+ items[i] = `${i}`
+ }
+
+ return items;
+ }
+}
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..7c25151 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,19 @@
/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";
+@plugin "tailwindcss-primeui";
+
+html {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+body {
+ margin: 0;
+ min-height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ font-weight: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background: light-dark(var(--p-surface-0), var(--p-surface-950));
+}