model datasource

src/app/services/services.component.ts

-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Observable, Subject, from, mergeMap, of, switchMap, takeUntil, tap } from 'rxjs';
 import { ComponentHostDirective } from '../directives/component-host.directive';
@@ -13,7 +13,8 @@ import { Service, ServiceTypes } from '../components';
   styleUrls: ['./services.component.scss'],
 })
 export class ServicesComponent implements OnInit {
-
+  @Input() id?: number;
+  @Output() valueChange: EventEmitter<Service> = new EventEmitter<Service>();
   componentList: Service[] = [{
     id: 0,
     title: "11111",
@@ -43,14 +44,36 @@ export class ServicesComponent implements OnInit {
   destroy: Subject<void> = new Subject<void>();
 
   ngOnInit(): void { // subscribing to the stream when component has been created
+    // this.getOne(this.id!).subscribe(result => {
+    //   this.loadComponent(result)
+    // })
     this.route.params
       .pipe(
-        mergeMap(({ id }: Params) => this.getOne(id)),
+        mergeMap(({ id }: Params) => this.getOne(id! ? id : this.id)),
         tap((service: Service) => this.loadComponent(service)),
         takeUntil(this.destroy.asObservable()),
       )
       .subscribe();
 
+
+
+
+
+
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes)
+    if (changes) {
+      this.id = changes['id'].currentValue
+      this.getOne(this.id!).subscribe(result => {
+        this.loadComponent(result)
+      })
+    }
+
+    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+    //Add '${implements OnChanges}' to the class.
+
   }
 
   loadComponent(service: Service): void {
@@ -61,7 +84,9 @@ export class ServicesComponent implements OnInit {
     const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
       servicesComponentFactory[service.id as ServiceTypes]
     );
-    instance.model = service.title;
+    instance.model = service.dataModel;
+    this.valueChange.emit(service);
+
   }
 
   ngOnDestroy(): void {

src/app/setting-widget/setting-widget.component.html

-<div id="loginform">
+<div id="loginform" style="background-color: gray;">
   <div class="position-relative overflow-hidden radial-gradient min-vh-100 w-100">
     <div class="position-relative z-index-5" style="z-index: 5 !important;">
-      <div class="row">
-        <div class="col-xl-7 col-xxl-8" style="background-color: black;">
-          <!-- <a href="../main/index.html" class="text-nowrap logo-img d-block px-4 py-9 w-100">
-            <img src="assets/images/mylearn-logo.png" width="150px" class="dark-logo" alt="Logo-Dark">
-            <img src="assets/images/mylearn-logo.png" width="150px" class="light-logo" alt="Logo-light" style="display: none;">
-          </a> -->
-          <div class="d-none d-xl-flex align-items-center justify-content-center" style="height: calc(100vh - 80px);">
-            <!-- <img src="assets/images/background/login-register.jpg" alt="" class="img-fluid" width="100%"> -->
+      <div class="row justify-content-center align-items-center ">
+        <div class="col-xl-7 col-xxl-8">
+          <div class="card">
+            <app-services [id]="widjetId" (valueChange)="onValueChange($event)"></app-services>
           </div>
         </div>
         <div class="col-xl-5 col-xxl-4">
@@ -21,7 +17,7 @@
               <form class="needs-validation" novalidate>
                 <div class="mb-3 position-relative">
                   <label for="exampleInputEmail1" class="form-label">เลือก Widget</label>
-                  <input name="username" type="text" class="form-control" id="exampleInputEmail1"
+                  <input [(ngModel)]="widjetId" name="username" type="text" class="form-control"
                     aria-describedby="emailHelp" required>
                   <div class="invalid-feedback">
                     Please enter a Username
@@ -30,13 +26,13 @@
                 </div>
                 <div class="mb-4 position-relative">
                   <label for="exampleInputPassword1" class="form-label">Datasource</label>
-                  <input name="username" type="text" class="form-control" id="exampleInputEmail1"
+                  <input [(ngModel)]="dataSoure" name="datasource" type="text" class="form-control"
                     aria-describedby="emailHelp" required>
                   <div class="invalid-feedback">
                     Please enter a Username
                   </div>
                 </div>
-                <div class="alert alert-danger" style="word-break: break-all;">Model</div>
+                <div class="alert alert-danger" style="word-break: break-all;">{{model?.dataModel}}</div>
                 <button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2">Save</button>
                 <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2">Preview</button>
               </form>

src/app/setting-widget/setting-widget.component.ts

 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-
+import { ServicesComponent } from '../services/services.component';
+import { FormsModule } from '@angular/forms';
+import { Service } from '../components';
 @Component({
   selector: 'app-setting-widget',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ServicesComponent, FormsModule],
   templateUrl: './setting-widget.component.html',
   styleUrls: ['./setting-widget.component.css']
 })
 export class SettingWidgetComponent implements OnInit {
-  model = {
-    username : "",
-    password : ""
-  }
+  model?: Service
+  widjetId = 0
+  dataSoure: string = "";
   constructor() { }
 
   ngOnInit() {
   }
 
+  onValueChange(value: Service) {
+    console.log("value",value)
+    this.model = value
+    this.dataSoure = this.model.dataSoure
+  }
+
 }

src/styles.scss

@@ -88,7 +88,3 @@ $success: #7952b3;
 //
 // Custom styles
 //
-
-body {
-  padding: 1.5rem;
-}