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,24 +92,32 @@ export class ServicesComponent implements OnInit {
 
   loadComponent(service: Service): void {
     console.log("service", service)
-    const { viewContainerRef }: ComponentHostDirective = this.componentHost;
-    viewContainerRef.clear();
-
-    const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
-      servicesComponentFactory[service.id as ServiceTypes]
-    );
-    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
+    if (service) {
+      const { viewContainerRef }: ComponentHostDirective = this.componentHost;
+      viewContainerRef.clear();
+
+      const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
+        servicesComponentFactory[service.id as ServiceTypes]
+      );
+      if (service.api != "") {
+        const options = {
+          headers: new HttpHeaders({
+            "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJIUlBsdXMiLCJyb2xlcyI6WyJVU0VSIl0sIndvcmthcmVhIjoiTk9ORSIsImlzcyI6IkNvbXB1dGVyIFNjaWVuY2UgQ29ycG9yYXRpb24gTGltaXRlZCIsInptbG9naW4iOiJmYWxzZSIsInJvbGVfbGV2ZWwiOiIiLCJlbXBsb3llZWlkIjoiMjAxODAyMTAiLCJicmFuY2giOiIxMDAiLCJlbXBfcG9zaXRpb24iOiJQLVJELTIyMDEiLCJ1c2VyX3JvbGUiOiIiLCJ1aWQiOiIyMDE4MDIxMCIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIyMDE4MDIxMCIsImxhbmciOiJ0aCIsImFkIjoiZmFsc2UiLCJmaXJzdGxvZ2luIjoiZmFsc2UiLCJ1cmxfbXlociI6Imh0dHA6Ly9ocnBsdXMubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiRW1wLVVzZXIiLCJmdWxsbmFtZSI6IuC4meC4suC4ouC4iuC4meC4sOC4iuC4seC4oiAg4LmC4Lit4LiU4Lie4Li04Lih4Lie4LmMIiwiY29taWQiOiIiLCJqb2IiOiJKLVJELTIyMDEiLCJ1c2VyIjoiQ2hhbmFjaGFpLm8iLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJjaGFuYWNoYWkubyIsIm1lbWJlcmlkIjoiIn0.5BgyoT-lLs9qFDj3iIizzYNeA0vWd9nTU8QHpzxMF7A",
+          }),
+        };
+        this.http.get(service.api, options).subscribe(result => {
+          service.dataSoure = result
+          service.dataModel = instance.model
+          this.valueChange.emit(service);
+        })
+      } else {
+        service.dataModel = instance.model
         this.valueChange.emit(service);
-      })
-    } else {
-      service.dataModel = instance.model
+      }
+
+    }else{
+      const { viewContainerRef }: ComponentHostDirective = this.componentHost;
+      viewContainerRef.clear();
       this.valueChange.emit(service);
     }
 

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)
-    this.widgetModel = value
-    this.dataSoure = value.api
-    this.model = value.dataModel
+    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 = ""
+    }
+
   }
 
 }