update

src/app/services/services.component.ts

@@ -78,6 +78,7 @@ export class ServicesComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges): void {
     console.log(changes)
     if (changes) {
+      this.destroy.asObservable()
       this.id = changes['id'].currentValue
       this.getOne(this.id!).subscribe(result => {
         this.loadComponent(result)
@@ -91,20 +92,22 @@ export class ServicesComponent implements OnInit {
 
   loadComponent(service: Service): void {
     console.log("service", service)
+    if (service) {
       const { viewContainerRef }: ComponentHostDirective = this.componentHost;
       viewContainerRef.clear();
 
       const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
         servicesComponentFactory[service.id as ServiceTypes]
       );
-    if (service.api!="") {
+      if (service.api != "") {
         const options = {
           headers: new HttpHeaders({
             "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJIUlBsdXMiLCJyb2xlcyI6WyJVU0VSIl0sIndvcmthcmVhIjoiTk9ORSIsImlzcyI6IkNvbXB1dGVyIFNjaWVuY2UgQ29ycG9yYXRpb24gTGltaXRlZCIsInptbG9naW4iOiJmYWxzZSIsInJvbGVfbGV2ZWwiOiIiLCJlbXBsb3llZWlkIjoiMjAxODAyMTAiLCJicmFuY2giOiIxMDAiLCJlbXBfcG9zaXRpb24iOiJQLVJELTIyMDEiLCJ1c2VyX3JvbGUiOiIiLCJ1aWQiOiIyMDE4MDIxMCIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIyMDE4MDIxMCIsImxhbmciOiJ0aCIsImFkIjoiZmFsc2UiLCJmaXJzdGxvZ2luIjoiZmFsc2UiLCJ1cmxfbXlociI6Imh0dHA6Ly9ocnBsdXMubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiRW1wLVVzZXIiLCJmdWxsbmFtZSI6IuC4meC4suC4ouC4iuC4meC4sOC4iuC4seC4oiAg4LmC4Lit4LiU4Lie4Li04Lih4Lie4LmMIiwiY29taWQiOiIiLCJqb2IiOiJKLVJELTIyMDEiLCJ1c2VyIjoiQ2hhbmFjaGFpLm8iLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJjaGFuYWNoYWkubyIsIm1lbWJlcmlkIjoiIn0.5BgyoT-lLs9qFDj3iIizzYNeA0vWd9nTU8QHpzxMF7A",
           }),
         };
         this.http.get(service.api, options).subscribe(result => {
-        service.dataModel = result
+          service.dataSoure = result
+          service.dataModel = instance.model
           this.valueChange.emit(service);
         })
       } else {
@@ -112,6 +115,12 @@ export class ServicesComponent implements OnInit {
         this.valueChange.emit(service);
       }
 
+    }else{
+      const { viewContainerRef }: ComponentHostDirective = this.componentHost;
+      viewContainerRef.clear();
+      this.valueChange.emit(service);
+    }
+
     // instance.model = service.dataModel;
 
 

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

@@ -6,6 +6,9 @@
           <div class="card">
             <app-services [id]="widjetId" (valueChange)="onValueChange($event)"></app-services>
           </div>
+          <div class="card p-4 mt-5">
+            <div class="alert alert-danger" style="word-break: break-all;">{{model | json}}</div>
+          </div>
         </div>
         <div class="col-xl-5 col-xxl-4">
           <div class="authentication-login min-vh-100 bg-body row justify-content-center align-items-center p-4">
@@ -32,7 +35,7 @@
                     Please enter a Username
                   </div>
                 </div>
-                <div class="alert alert-danger" style="word-break: break-all;">{{model | json}}</div>
+                <div class="alert alert-danger" style="word-break: break-all;">{{resp | json}}</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

@@ -14,17 +14,27 @@ export class SettingWidgetComponent implements OnInit {
   widgetModel?: Service
   widjetId = 0
   dataSoure: string = "";
-  model : string = "";
+  model: string = "";
+  resp: string = ""
   constructor() { }
 
   ngOnInit() {
   }
 
   onValueChange(value: Service) {
-    console.log("value",value)
+    console.log("value", value)
+    if (value) {
       this.widgetModel = value
       this.dataSoure = value.api
+      this.resp = value.dataSoure
       this.model = value.dataModel
+    }else{
+      this.widgetModel = undefined
+      this.dataSoure = ""
+      this.resp = ""
+      this.model = ""
+    }
+
   }
 
 }