diff --git a/cypress/integration/property-edit.e2e.js b/cypress/integration/property-edit.e2e.js
index 0abc50d3c8f..e387ef7dc5b 100644
--- a/cypress/integration/property-edit.e2e.js
+++ b/cypress/integration/property-edit.e2e.js
@@ -22,7 +22,7 @@ describe('edit properties of directive in the property view tab', () => {
       cy.get('.explorer-panel:contains("Properties of app-todo")')
         .find('ng-property-view mat-tree-node:contains("editMode")')
         .find('ng-property-editor .editor')
-        .click()
+        .click({ force: true })
         .find('.editor-input')
         .clear()
         .type('true')
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
index cbc7c879368..e7e309e2622 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts
@@ -91,11 +91,34 @@ export class DirectivePropertyResolver {
   }
 
   getExpandedProperties(): NestedProp[] {
-    return getExpandedDirectiveProperties(this._dataSource.data);
+    return [
+      ...getExpandedDirectiveProperties(this._inputsDataSource.data),
+      ...getExpandedDirectiveProperties(this._outputsDataSource.data),
+      ...getExpandedDirectiveProperties(this._stateDataSource.data),
+    ];
   }
 
   updateProperties(newProps: Properties): void {
-    this._dataSource.update(newProps.props);
+    const inputLabels: string[] = Object.keys(newProps.inputs || {});
+    const outputLabels: string[] = Object.keys(newProps.outputs || {});
+
+    const inputProps = {};
+    const outputProps = {};
+    const stateProps = {};
+    let propPointer;
+
+    Object.keys(this.directiveProperties).forEach(propName => {
+      propPointer = inputLabels.includes(propName)
+        ? inputProps
+        : outputLabels.includes(propName)
+        ? outputProps
+        : stateProps;
+      propPointer[propName] = this.directiveProperties[propName];
+    });
+
+    this._inputsDataSource.update(inputProps);
+    this._outputsDataSource.update(outputProps);
+    this._stateDataSource.update(stateProps);
     this._props = newProps;
   }