get dashboardId for Widget

src/app/components/widget1/widget1.component.html

 <!-- <iframe [src]="iframeUrl" style="width: 100%; height: 75vh; border: none;"></iframe> -->
 
+<!-- Controls Section -->
+<div class="header-controls px-4 py-2">
+  <!-- Dashboard Selector -->
+  <div class="dashboard-selector flex items-center space-x-4">
+    <label class="selector-label text-lg font-medium text-gray-700">Select Dashboard:</label>
+    <select (change)="onDashboardChange($event)" class="block w-full max-w-xs px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+      <option [disabled]="true" [selected]="true">-- Select a Dashboard --</option>
+      <option *ngFor="let dashboard of dashboards" [value]="dashboard.dashboardId">
+        {{ dashboard.thName }}
+      </option>
+    </select>
+  </div>
+</div>
+
 <div style="width: 100%; height: 80vh;">
   <iframe
     *ngIf="dashboardUrl"

src/app/components/widget1/widget1.component.ts

 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DashboardWidgetModel } from 'src/app/shared/model/widget.model';
+import { WidgetService } from 'src/app/shared/services/widget.service';
 
 @Component({
   selector: 'app-widget1',
@@ -11,16 +13,35 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 })
 export class Widget1Component implements OnInit {
 
-  // iframeUrl!: SafeResourceUrl;
+  dashboards: DashboardWidgetModel[] = [];
   dashboardUrl: SafeResourceUrl | null = null;
-  private dashboardId = 'dash-1758608130166';
-  private portalAppBaseUrl = 'https://portal.myhr.co.th';
+  private dashboardId: string | null = null;
+  // private portalAppBaseUrl = 'https://portal.myhr.co.th';
+  private portalAppBaseUrl = 'http://localhost:4200';
 
-  constructor(private sanitizer: DomSanitizer) { }
+  constructor(
+    private sanitizer: DomSanitizer,
+    private widgetService: WidgetService
+  ) { }
 
   ngOnInit() {
-    const url = `${this.portalAppBaseUrl}/#/embed/dashboard/${this.dashboardId}`;
-    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    this.loadDashboards();
   }
 
+  loadDashboards(): void {
+    this.widgetService.getDashboards().subscribe(dashboards => {
+      this.dashboards = dashboards;
+    });
+  }
+
+  onDashboardChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    this.dashboardId = selectElement.value;
+    if (this.dashboardId) {
+      const url = `${this.portalAppBaseUrl}/#/embed/dashboard/${this.dashboardId}`;
+      this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    } else {
+      this.dashboardUrl = null;
+    }
+  }
 }

src/app/shared/model/widget.model.ts

+export interface DashboardWidgetModel {
+  dashboardId: string
+  companyId: string
+  thName: string
+  engName: string
+  application: string
+  module: string
+  description: string
+  datasetId: string
+  templateId: string
+  fileName: string
+  isActive: boolean
+  widgets: Widget[]
+}
+
+export interface Widget {
+  widgetId: string
+  thName: string
+  engName: string
+  component: string
+  cols: number
+  rows: number
+  x: number
+  y: number
+  data: string
+  config: string
+  perspective: string
+}

src/app/shared/services/widget.service.ts

+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { DashboardWidgetModel } from '../model/widget.model';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WidgetService {
+  api = "/dashboard"
+  baseUrl = environment.portal + this.api
+
+  constructor(private http: HttpClient) { }
+
+  getDashboards(): Observable<DashboardWidgetModel[]> {
+    return this.http.get<DashboardWidgetModel[]>(`${this.baseUrl}/lists/search?application=myskill-x`);
+  }
+}