provide the animations

src/main/webui/package-lock.json

@@ -8,7 +8,7 @@
       "name": "webui",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/animations": "^18.0.0",
+        "@angular/animations": "^18.0.3",
         "@angular/common": "^18.0.0",
         "@angular/compiler": "^18.0.0",
         "@angular/core": "^18.0.0",
@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
+        "primeicons": "^7.0.0",
         "primeng": "^17.18.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -10086,6 +10087,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
+    },
     "node_modules/primeng": {
       "version": "17.18.1",
       "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.18.1.tgz",

src/main/webui/package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
+    "@angular/animations": "^18.0.3",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "primeicons": "^7.0.0",
     "primeng": "^17.18.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/main/webui/src/app/app.component.html

@@ -7,8 +7,6 @@
 <h3>Create object</h3>
 <form>
   <input type="text" pInputText />
-  <p-dropdown
+  <p-dropdown [options]="cities" [(ngModel)]="selectedCity1" placeholder="Select a City" optionLabel="name"></p-dropdown>
-    [options]="options"
-    [(ngModel)]="selectedOption"/>
   <button pButton type="submit">Create</button>
 </form>

src/main/webui/src/app/app.component.ts

@@ -1,10 +1,15 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import {PaginatorModule} from "primeng/paginator";
 import { InputTextModule } from 'primeng/inputtext';
 import { DropdownModule } from 'primeng/dropdown';
-import {SelectItem} from "primeng/api";
+
+
+interface City {
+  name: string,
+  code: string
+}
 
 @Component({
   selector: 'app-root',
@@ -13,22 +18,21 @@ import {SelectItem} from "primeng/api";
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent implements OnInit {
+
-  selectedOption: SelectItem | undefined;
+
-  options:SelectItem[];
+export class AppComponent {
+  cities: City[];
+
+  selectedCity1: City;
 
   constructor() {
-    this.options = [
+    this.cities = [
-      { label: "GET", value: "GET" },
+      {name: 'New York', code: 'NY'},
-      { label: "POST", value: "POST" },
+      {name: 'Rome', code: 'RM'},
-      { label: "PUT", value: "PUT" },
+      {name: 'London', code: 'LDN'},
-      { label: "DELETE", value: "DELETE" },
+      {name: 'Istanbul', code: 'IST'},
-      { label: "HEAD", value: "HEAD" },
+      {name: 'Paris', code: 'PRS'}
-      { label: "CONNECT", value: "CONNECT" },
-      { label: "OPTIONS", value: "OPTIONS" },
-      { label: "TRACE", value: "TRACE" },
-      { label: "PATCH", value: "PATCH" }
     ];
+    this.selectedCity1 = this.cities[0]
   }
-  ngOnInit() {}
 }

src/main/webui/src/app/app.config.ts

@@ -2,7 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideAnimations} from "@angular/platform-browser/animations";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimations()
+  ],
 };

src/main/webui/src/styles.css

@@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+@import "primeicons/primeicons.css";
 @import "primeng/resources/themes/aura-dark-blue/theme.css"; /* This line defines the global primeAngular theme*/
 @import "primeng/resources/primeng.css";