diff --git a/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.html b/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.html
index d97c4bd56b..465d3d1250 100644
--- a/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.html
+++ b/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.html
@@ -22,13 +22,23 @@
         <div>
             <mat-form-field class="form-field" fxFlex="100" color="accent">
                 <mat-label>Host</mat-label>
-                <input matInput [(ngModel)]="host" type="text" />
+                <input
+                    matInput
+                    [(ngModel)]="host"
+                    (ngModelChange)="hostChange.emit($event)"
+                    type="text"
+                />
             </mat-form-field>
         </div>
         <div>
             <mat-form-field class="form-field" fxFlex="100" color="accent">
                 <mat-label>Port</mat-label>
-                <input matInput [(ngModel)]="port" type="number" />
+                <input
+                    matInput
+                    [(ngModel)]="port"
+                    (ngModelChange)="portChange.emit($event)"
+                    type="number"
+                />
             </mat-form-field>
         </div>
     </div>
diff --git a/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.ts b/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.ts
index 9a00398bb4..9ce233c133 100644
--- a/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.ts
+++ b/ui/src/app/configuration/messaging-configuration/broker-config/broker-config.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'sp-messaging-broker-config',
@@ -31,4 +31,10 @@ export class SpMessagingBrokerConfigComponent {
 
     @Input()
     port: number;
+
+    @Output()
+    hostChange = new EventEmitter<string>();
+
+    @Output()
+    portChange = new EventEmitter<number>();
 }
diff --git a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
index 8f96bc8864..f31c5fba3f 100644
--- a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
+++ b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
@@ -171,26 +171,27 @@
         <sp-split-section
             title="Messaging layers"
             subtitle="Manage messaging layer connectivity"
+            *ngIf="loadingCompleted"
         >
             <sp-messaging-broker-config
                 title="JMS"
-                [host]="messagingSettings.jmsHost"
-                [port]="messagingSettings.jmsPort"
+                [(host)]="messagingSettings.jmsHost"
+                [(port)]="messagingSettings.jmsPort"
             ></sp-messaging-broker-config>
             <sp-messaging-broker-config
                 title="Kafka"
-                [host]="messagingSettings.kafkaHost"
-                [port]="messagingSettings.kafkaPort"
+                [(host)]="messagingSettings.kafkaHost"
+                [(port)]="messagingSettings.kafkaPort"
             ></sp-messaging-broker-config>
             <sp-messaging-broker-config
                 title="MQTT"
-                [host]="messagingSettings.mqttHost"
-                [port]="messagingSettings.mqttPort"
+                [(host)]="messagingSettings.mqttHost"
+                [(port)]="messagingSettings.mqttPort"
             ></sp-messaging-broker-config>
             <sp-messaging-broker-config
                 title="Nats"
-                [host]="messagingSettings.natsHost"
-                [port]="messagingSettings.natsPort"
+                [(host)]="messagingSettings.natsHost"
+                [(port)]="messagingSettings.natsPort"
             ></sp-messaging-broker-config>
             <div fxLayout="column">
                 <div class="subsection-title">Pulsar</div>
@@ -205,8 +206,8 @@
             </div>
             <sp-messaging-broker-config
                 title="Zookeeper"
-                [host]="messagingSettings.zookeeperHost"
-                [port]="messagingSettings.zookeeperPort"
+                [(host)]="messagingSettings.zookeeperHost"
+                [(port)]="messagingSettings.zookeeperPort"
             ></sp-messaging-broker-config>
             <div fxLayoutAlign="start center" class="mt-10">
                 <button