diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 81e39b50a4e4..97b5056f818a 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -31,6 +31,11 @@
   }
 
   .method-table, .option-table, .list-table {
+    td > code {
+      background-color: inherit;
+      white-space: pre;
+    }
+
     .with-github-links {
       align-items: center;
       display: flex;
@@ -66,23 +71,6 @@
     font-weight: bold;
   }
 
-  .short-description {
-    margin: 6px 0 0 10px;
-  }
-
-  .properties-table {
-    font-size: 14px;
-
-    thead th {
-      &:nth-child(1) {
-        width: 20%;
-      }
-      &:nth-child(2) {
-        width: 20%;
-      }
-    }
-  }
-
   .parameters-table {
     margin-top: 0;
     font-size: 14px;
@@ -104,7 +92,7 @@
     }
   }
 
-  .from-constructor, .read-only-property {
+  .from-constructor, .read-only-property, .write-only-property {
     font-style: italic;
     color: $blue;
   }
@@ -113,6 +101,29 @@
     list-style: none;
     padding: 0;
   }
+
+  .selector-list, .inherited-members-list {
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .selector-list {
+    li, a {
+      font-weight: bold;
+      i {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .member-name {
+    font-weight: bold;
+  }
 }
 
 .deprecated-api-item {
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 173f52427421..98749dd37c31 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -137,6 +137,7 @@ aio-code pre {
 .sidenav-content code a {
   color: inherit;
   font-size: inherit;
+  font-weight: inherit;
 }
 
 /* PRETTY PRINTING STYLES for prettify.js. */
diff --git a/aio/tests/e2e/api.e2e-spec.ts b/aio/tests/e2e/api.e2e-spec.ts
index 9ff6625eef3f..b97e89e4f30e 100644
--- a/aio/tests/e2e/api.e2e-spec.ts
+++ b/aio/tests/e2e/api.e2e-spec.ts
@@ -8,7 +8,19 @@ describe('Api pages', function() {
 
   it('should show direct and indirect subclasses of a class', () => {
     const page = new ApiPage('api/forms/AbstractControlDirective');
-    expect(page.getDescendants('class')).toEqual(['ControlContainer', 'AbstractFormGroupDirective', 'NgControl']);
+    expect(page.getDescendants('class')).toEqual([
+      'ControlContainer',
+      'AbstractFormGroupDirective',
+      'NgModelGroup',
+      'FormGroupName',
+      'NgForm',
+      'FormGroupDirective',
+      'FormArrayName',
+      'NgControl',
+      'NgModel',
+      'FormControlDirective',
+      'FormControlName'
+    ]);
   });
 
   it('should show child interfaces that extend an interface', () => {
@@ -26,14 +38,9 @@ describe('Api pages', function() {
     expect(page.getOverview('type-alias').getText()).toContain('type HttpEvent<T>');
   });
 
-  it('should show readonly properties as getters', () => {
-    const page = new ApiPage('api/common/http/HttpRequest');
-    expect(page.getOverview('class').getText()).toContain('get body: T | null');
-  });
-
   it('should not show parenthesis for getters', () => {
     const page = new ApiPage('api/core/NgModuleRef');
-    expect(page.getOverview('class').getText()).toContain('get injector: Injector');
+    expect(page.getOverview('class').getText()).toContain('injector: Injector');
   });
 
   it('should show both type and initializer if set', () => {
diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js
index 9557ceac2b7c..797692aed7eb 100644
--- a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js
+++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js
@@ -21,64 +21,63 @@ module.exports = function matchUpDirectiveDecorators() {
         if (doc.docType === 'directive') {
 
           doc.selector = stripQuotes(doc.directiveOptions.selector);
+          doc.selectorArray = doc.selector ? doc.selector.split(',') : [];
           doc.exportAs = stripQuotes(doc.directiveOptions.exportAs);
+          doc.exportAsArray = doc.exportAs ? doc.exportAs.split(',') : [];
 
-          doc.inputs = getBindingInfo(doc.directiveOptions.inputs, doc.members, 'Input');
-          doc.outputs = getBindingInfo(doc.directiveOptions.outputs, doc.members, 'Output');
+          attachBindingInfo(doc.directiveOptions.inputs, doc.members, 'Input');
+          attachBindingInfo(doc.directiveOptions.outputs, doc.members, 'Output');
         }
       });
     }
   };
 };
 
-function getBindingInfo(directiveBindings, members, bindingType) {
+function attachBindingInfo(directiveBindings, members, bindingType) {
   const bindings = {};
 
-  // Parse the bindings from the directive decorator
-  if (directiveBindings) {
-    directiveBindings.forEach(function(binding) {
-      const bindingInfo = parseBinding(binding);
-      bindings[bindingInfo.propertyName] = bindingInfo;
-    });
-  }
-
   if (members) {
+    // Parse the bindings from the directive decorator
+    if (directiveBindings) {
+      directiveBindings.forEach(function(binding) {
+        const bindingInfo = parseBinding(bindingType, binding);
+        bindings[bindingInfo.propertyName] = bindingInfo;
+      });
+    }
+
     members.forEach(function(member) {
       if (member.decorators) {
         // Search for members with binding decorators
         member.decorators.forEach(function(decorator) {
           if (decorator.name === bindingType) {
-            bindings[member.name] = createBindingInfo(member.name, decorator.arguments[0] || member.name);
+            bindings[member.name] = createBindingInfo(bindingType, member.name, decorator.arguments[0] || member.name);
           }
         });
       }
-
-      // Now ensure that any bindings have the associated member attached
-      // Note that this binding could have come from the directive decorator
+      // Attach binding info to the member
+      // Note: this may have come from the `@Directive` decorator or from a property decorator such as `@Input`.
       if (bindings[member.name]) {
-        bindings[member.name].memberDoc = member;
+        member.boundTo = bindings[member.name];
       }
     });
   }
-
-  // Convert the map back to an array
-  return Object.keys(bindings).map(function(key) { return bindings[key]; });
 }
 
 function stripQuotes(value) {
   return (typeof(value) === 'string') ? value.trim().replace(/^(['"])(.*)\1$/, '$2') : value;
 }
 
-function parseBinding(option) {
+function parseBinding(bindingType, option) {
   // Directive decorator bindings are of the form: "propName : bindingName" (bindingName is optional)
   const optionPair = option.split(':');
   const propertyName = optionPair[0].trim();
   const bindingName = (optionPair[1] || '').trim() || propertyName;
-  return createBindingInfo(propertyName, bindingName);
+  return createBindingInfo(bindingType, propertyName, bindingName);
 }
 
-function createBindingInfo(propertyName, bindingName) {
+function createBindingInfo(bindingType, propertyName, bindingName) {
   return {
+    type: bindingType,
     propertyName: stripQuotes(propertyName),
     bindingName: stripQuotes(bindingName)
   };
diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js
index 6a266203d537..b4d84f6a5377 100644
--- a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js
@@ -59,7 +59,7 @@ describe('matchUpDirectiveDecorators processor', () => {
   });
 
   it('should extract inputs and outputs from the directive decorator', () => {
-    const docs = [{
+    const doc = {
       docType: 'directive',
       directiveOptions: {
         inputs: ['in1:in2', 'in3', '  in4:in5  ', '  in6  '],
@@ -70,28 +70,30 @@ describe('matchUpDirectiveDecorators processor', () => {
         { name: 'in3' },
         { name: 'in4' },
         { name: 'in6' },
+        { name: 'prop1' },
         { name: 'out1' },
         { name: 'out2' },
-        { name: 'out4' }
+        { name: 'out4' },
+        { name: 'prop2' },
       ]
-    }];
-    processorFactory().$process(docs);
-    expect(docs[0].inputs).toEqual([
-      { propertyName: 'in1', bindingName: 'in2', memberDoc: docs[0].members[0] },
-      { propertyName: 'in3', bindingName: 'in3', memberDoc: docs[0].members[1] },
-      { propertyName: 'in4', bindingName: 'in5', memberDoc: docs[0].members[2] },
-      { propertyName: 'in6', bindingName: 'in6', memberDoc: docs[0].members[3] }
-    ]);
+    };
 
-    expect(docs[0].outputs).toEqual([
-      { propertyName: 'out1', bindingName: 'out1', memberDoc: docs[0].members[4] },
-      { propertyName: 'out2', bindingName: 'out3', memberDoc: docs[0].members[5] },
-      { propertyName: 'out4', bindingName: 'out4', memberDoc: docs[0].members[6] }
+    processorFactory().$process([doc]);
+    expect(doc.members).toEqual([
+      { name: 'in1', boundTo: { type: 'Input', propertyName: 'in1', bindingName: 'in2' } },
+      { name: 'in3', boundTo: { type: 'Input', propertyName: 'in3', bindingName: 'in3' } },
+      { name: 'in4', boundTo: { type: 'Input', propertyName: 'in4', bindingName: 'in5' } },
+      { name: 'in6', boundTo: { type: 'Input', propertyName: 'in6', bindingName: 'in6'  }},
+      { name: 'prop1' },
+      { name: 'out1', boundTo: { type: 'Output', propertyName: 'out1', bindingName: 'out1' } },
+      { name: 'out2', boundTo: { type: 'Output', propertyName: 'out2', bindingName: 'out3' } },
+      { name: 'out4', boundTo: { type: 'Output', propertyName: 'out4', bindingName: 'out4'  }},
+      { name: 'prop2' },
     ]);
   });
 
   it('should extract inputs and outputs from decorated properties', () => {
-    const docs = [{
+    const doc = {
       docType: 'directive',
       directiveOptions: {},
       members: [
@@ -100,21 +102,18 @@ describe('matchUpDirectiveDecorators processor', () => {
         { name: 'c1', decorators: [{ name: 'Input', arguments: [] }] },
         { name: 'd1', decorators: [{ name: 'Output', arguments: [] }] },
       ]
-    }];
-    processorFactory().$process(docs);
-    expect(docs[0].inputs).toEqual([
-      { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] },
-      { propertyName: 'c1', bindingName: 'c1', memberDoc: docs[0].members[2] }
-    ]);
-
-    expect(docs[0].outputs).toEqual([
-      { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[1] },
-      { propertyName: 'd1', bindingName: 'd1', memberDoc: docs[0].members[3] }
+    };
+    processorFactory().$process([doc]);
+    expect(doc.members).toEqual([
+      { name: 'a1', decorators: [{ name: 'Input', arguments: ['a2'] }], boundTo: { type: 'Input', propertyName: 'a1', bindingName: 'a2' } },
+      { name: 'b1', decorators: [{ name: 'Output', arguments: ['b2'] }], boundTo: { type: 'Output', propertyName: 'b1', bindingName: 'b2' } },
+      { name: 'c1', decorators: [{ name: 'Input', arguments: [] }], boundTo: { type: 'Input', propertyName: 'c1', bindingName: 'c1' } },
+      { name: 'd1', decorators: [{ name: 'Output', arguments: [] }], boundTo: { type: 'Output', propertyName: 'd1', bindingName: 'd1' } },
     ]);
   });
 
   it('should merge directive inputs/outputs with decorator property inputs/outputs', () => {
-    const docs = [{
+    const doc = {
       docType: 'directive',
       directiveOptions: {
         inputs: ['a1:a2'],
@@ -126,16 +125,13 @@ describe('matchUpDirectiveDecorators processor', () => {
         { name: 'b1' },
         { name: 'b3', decorators: [{ name: 'Output', arguments: ['b4'] }] },
       ]
-    }];
-    processorFactory().$process(docs);
-    expect(docs[0].inputs).toEqual([
-      { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] },
-      { propertyName: 'a3', bindingName: 'a4', memberDoc: docs[0].members[1] }
-    ]);
-
-    expect(docs[0].outputs).toEqual([
-      { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[2] },
-      { propertyName: 'b3', bindingName: 'b4', memberDoc: docs[0].members[3] }
+    };
+    processorFactory().$process([doc]);
+    expect(doc.members).toEqual([
+      { name: 'a1', boundTo: { type: 'Input', propertyName: 'a1', bindingName: 'a2' } },
+      { name: 'a3', boundTo: { type: 'Input', propertyName: 'a3', bindingName: 'a4' }, decorators: [{ name: 'Input', arguments: ['a4'] }] },
+      { name: 'b1', boundTo: { type: 'Output', propertyName: 'b1', bindingName: 'b2' } },
+      { name: 'b3', boundTo: { type: 'Output', propertyName: 'b3', bindingName: 'b4' }, decorators: [{ name: 'Output', arguments: ['b4'] }] },
     ]);
   });
 });
diff --git a/aio/tools/transforms/angular-api-package/tag-defs/selectors.js b/aio/tools/transforms/angular-api-package/tag-defs/selectors.js
new file mode 100644
index 000000000000..e80cbf18af17
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/tag-defs/selectors.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'selectors'};
+};
diff --git a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js
index 9b3c3b6fcaaf..001b4b24b622 100644
--- a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js
+++ b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js
@@ -3,7 +3,12 @@ module.exports = function filterBy() {
     name: 'filterByPropertyValue',
     process: function(list, property, value) {
       if (!list) return list;
-      return list.filter(item => item[property] === value);
+      const values = Array.isArray(value) ? value : [value];
+      return list.filter(item => values.some(value => compare(item[property], value)));
     }
   };
-};
\ No newline at end of file
+};
+
+function compare(actual, expected) {
+  return expected instanceof(RegExp) ? expected.test(actual) : actual === expected;
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js
index d2c5823bb5db..b3874d7931e0 100644
--- a/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js
+++ b/aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js
@@ -7,8 +7,19 @@ describe('filterByPropertyValue filter', () => {
 
   it('should be called "filterByPropertyValue"', function() { expect(filter.name).toEqual('filterByPropertyValue'); });
 
-  it('should filter out items that do not match the given property value', function() {
+  it('should filter out items that do not match the given property string value', function() {
     expect(filter.process([{ a: 1 }, { a: 2 }, { b: 1 }, { a: 1, b: 2 }, { a: null }, { a: undefined }], 'a', 1))
         .toEqual([{ a: 1 }, { a: 1, b: 2 }]);
   });
+
+
+  it('should filter out items that do not match the given property regex value', function() {
+    expect(filter.process([{ a: '1' }, { a: '12' }, { b: '1' }, { a: 'a' }, { a: '1', b: '2' }, { a: null }, { a: undefined }], 'a', /\d/))
+        .toEqual([{ a: '1' }, { a: '12' }, { a: '1', b: '2' }]);
+  });
+
+  it('should filter out items that do not match the given array of property regex/string values', function() {
+    expect(filter.process([{ a: '1' }, { a: '12' }, { b: '1' }, { a: 'a' }, { a: '1', b: '2' }, { a: null }, { a: undefined }], 'a', [/\d/, 'a']))
+        .toEqual([{ a: '1' }, { a: '12' }, { a: 'a' }, { a: '1', b: '2' }]);
+  });
 });
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/hasValues.js b/aio/tools/transforms/angular-base-package/rendering/hasValues.js
index 7b15501fa29b..c9578adc93c4 100644
--- a/aio/tools/transforms/angular-base-package/rendering/hasValues.js
+++ b/aio/tools/transforms/angular-base-package/rendering/hasValues.js
@@ -3,7 +3,21 @@ module.exports = function hasValues() {
     name: 'hasValues',
     process: function(list, property) {
       if (!list || !Array.isArray(list)) return false;
-      return list.some(item => item[property]);
+      return list.some(item => readProperty(item, property.split('.'), 0));
     }
   };
-};
\ No newline at end of file
+};
+
+/**
+ * Search deeply into an object via a collection of property segments, starting at the
+ * indexed segment.
+ *
+ * E.g. if `obj = { a: { b: { c: 10 }}}` then
+ *  `readProperty(obj, ['a', 'b', 'c'], 0)` will return true;
+ * but
+ *  `readProperty(obj, ['a', 'd'], 0)` will return false;
+ */
+function readProperty(obj, propertySegments, index) {
+  const value = obj[propertySegments[index]];
+  return !!value && (index === propertySegments.length - 1 || readProperty(value, propertySegments, index + 1));
+}
diff --git a/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js b/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js
index 7b057bcafd4b..c260f5d17ac3 100644
--- a/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js
+++ b/aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js
@@ -7,13 +7,37 @@ describe('hasValues filter', () => {
 
   it('should be called "hasValues"', function() { expect(filter.name).toEqual('hasValues'); });
 
-  it('should return true if the specified property is truthy on any item in the list', function() {
+  it('should return true if the specified property path is truthy on any item in the list', function() {
+    expect(filter.process([{a: 1}], 'a')).toEqual(true);
+    expect(filter.process([{a: 1, b: 2}], 'a')).toEqual(true);
+    expect(filter.process([{b: 2}, {a: 1}], 'a')).toEqual(true);
+
+    expect(filter.process([{a:{b:1}}], 'a.b')).toEqual(true);
+    expect(filter.process([{a:{b:1}, b: 2}], 'a.b')).toEqual(true);
+    expect(filter.process([{b: 2}, {a:{b:1}}], 'a.b')).toEqual(true);
+  });
+
+  it('should return false if the value is not an object', () => {
     expect(filter.process([], 'a')).toEqual(false);
     expect(filter.process(0, 'a')).toEqual(false);
+    expect(filter.process([], 'a.b')).toEqual(false);
+    expect(filter.process(0, 'a.b')).toEqual(false);
+  });
+
+  it('should return false if the property exists but is falsy', () => {
+    expect(filter.process([{a: false}], 'a')).toEqual(false);
+    expect(filter.process([{a: ''}], 'a')).toEqual(false);
+    expect(filter.process([{a: 0}], 'a')).toEqual(false);
+    expect(filter.process([{a: null}], 'a')).toEqual(false);
+    expect(filter.process([{a: undefined}], 'a')).toEqual(false);
+  });
+
+  it('should return false if any of the properties in the path do not exist', () => {
     expect(filter.process({}, 'a')).toEqual(false);
-    expect(filter.process([{a: 1}], 'a')).toEqual(true);
+    expect(filter.process({}, 'a.b')).toEqual(false);
+
     expect(filter.process([{b: 2}], 'a')).toEqual(false);
-    expect(filter.process([{a: 1, b: 2}], 'a')).toEqual(true);
-    expect(filter.process([{b: 2}, {a: 1}], 'a')).toEqual(true);
+    expect(filter.process([{a: 2}], 'a.b')).toEqual(false);
+    expect(filter.process([{a: {}}], 'a.b.c')).toEqual(false);
   });
 });
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/class.template.html b/aio/tools/transforms/templates/api/class.template.html
index 7446b4321677..50d52311e688 100644
--- a/aio/tools/transforms/templates/api/class.template.html
+++ b/aio/tools/transforms/templates/api/class.template.html
@@ -1,21 +1,9 @@
-{% import "lib/memberHelpers.html" as memberHelpers -%}
-{% import "lib/descendants.html" as descendants -%}
-{% import "lib/paramList.html" as params -%}
 {% extends 'export-base.template.html' -%}
 
 {% block overview %}
   {% include "includes/class-overview.html" %}
 {% endblock %}
 {% block details %}
-  {% block additional %}{% endblock %}
   {% include "includes/description.html" %}
-  {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
-  {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
-  {% if doc.constructorDoc %}
-  <h2>Constructor</h2>
-  {$ memberHelpers.renderMethodDetail(versionInfo, doc.constructorDoc, 'constructor') $}{% endif %}
-
-  {$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
-
-  {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+  {% include "includes/class-members.html" %}
 {% endblock %}
diff --git a/aio/tools/transforms/templates/api/directive.template.html b/aio/tools/transforms/templates/api/directive.template.html
index daeae4e52686..1596da9825c0 100644
--- a/aio/tools/transforms/templates/api/directive.template.html
+++ b/aio/tools/transforms/templates/api/directive.template.html
@@ -1,14 +1,28 @@
-{% import "lib/directiveHelpers.html" as directiveHelper -%}
-{% import "lib/paramList.html" as params -%}
+{% import "lib/memberHelpers.html" as memberHelpers -%}
 {% extends 'class.template.html' -%}
 
-{% block overview %}{% include "includes/directive-overview.html" %}{% endblock %}
-{% block additional -%}
-{% include "includes/ngmodule.html" %}
-{% include "includes/selectors.html" %}
-  {$ directiveHelper.renderBindings(doc.inputs, 'inputs', 'input', 'Inputs') $}
-  {$ directiveHelper.renderBindings(doc.outputs, 'outputs', 'output', 'Outputs') $}
+{% block overview %}{% endblock %}
+
+{% block details -%}
+  {% include "includes/ngmodule.html" %}
+  {% include "includes/selectors.html" %}
+
+  {$ memberHelpers.renderDirectiveProperties(doc, 'Properties') $}
+
   {% include "includes/export-as.html" %}
-{% endblock %}
 
-{% block annotations %}{% endblock %}
+  {% if doc.description or doc.usageNotes %}
+  <section class="description">
+    <h2>Description</h2>
+    {$ (doc.description or '') | trimBlankLines | marked $}
+    {$ (doc.usageNotes or '') | trimBlankLines | marked $}
+  </section>
+  {% endif %}
+
+  {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+  {$ memberHelpers.renderDirectiveAncestors(doc, 'methods') $}
+  {% endblock %}
+
+{% block endNotes %}{% endblock %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/enum.template.html b/aio/tools/transforms/templates/api/enum.template.html
index 0f07f88cbc19..93321b4ced5d 100644
--- a/aio/tools/transforms/templates/api/enum.template.html
+++ b/aio/tools/transforms/templates/api/enum.template.html
@@ -10,5 +10,5 @@
 </section>
 
 {% include "includes/description.html" %}
-{$ memberHelpers.renderProperties(doc.properties, 'members', 'member', 'Members', ['Member', 'Value']) $}
+{$ memberHelpers.renderProperties(doc.properties, 'members', 'member', 'Members', ['Member']) $}
 {% endblock %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/export-base.template.html b/aio/tools/transforms/templates/api/export-base.template.html
index 2d42946f4477..9b94d5a312d8 100644
--- a/aio/tools/transforms/templates/api/export-base.template.html
+++ b/aio/tools/transforms/templates/api/export-base.template.html
@@ -1,11 +1,14 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  <p class="short-description">{$ doc.shortDescription | marked $}</p>
+  <section class="short-description">
+    {$ doc.shortDescription | marked $}
+    {% if doc.description %}<p><a href="#description">See more...</a></p>{% endif %}
+  </section>
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% block overview %}{% endblock %}
   {% include "includes/see-also.html" %}
   {% block details %}{% endblock %}
-  {% include "includes/usageNotes.html" %}
+  {% block endNotes %}{% include "includes/usageNotes.html" %}{% endblock %}
 {% endblock %}
diff --git a/aio/tools/transforms/templates/api/includes/class-members.html b/aio/tools/transforms/templates/api/includes/class-members.html
new file mode 100644
index 000000000000..7faf3ebaa75f
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/class-members.html
@@ -0,0 +1,14 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+
+{$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
+
+{$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
+
+{% if doc.constructorDoc %}
+<h2>Constructor</h2>
+{$ memberHelpers.renderMethodDetail(versionInfo, doc.constructorDoc, 'constructor') $}
+{% endif %}
+
+{$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
+
+{$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
diff --git a/aio/tools/transforms/templates/api/includes/class-overview.html b/aio/tools/transforms/templates/api/includes/class-overview.html
index c312d557c12e..64f4f388c7ec 100644
--- a/aio/tools/transforms/templates/api/includes/class-overview.html
+++ b/aio/tools/transforms/templates/api/includes/class-overview.html
@@ -1,9 +1,10 @@
 {% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
 
 <section class="{$ doc.docType $}-overview">
 <code-example language="ts" hideCopy="true" linenums="false">
 {% if doc.isAbstract %}abstract {% endif%}class {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
 </code-example>
-{$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
+{$ descendants.renderDescendants(doc, 'class', 'Subclasses', true, r/class|directive|pipe|decorator/) $}
 </section>
diff --git a/aio/tools/transforms/templates/api/includes/directive-overview.html b/aio/tools/transforms/templates/api/includes/directive-overview.html
deleted file mode 100644
index 0946b1b0a6a4..000000000000
--- a/aio/tools/transforms/templates/api/includes/directive-overview.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% import "lib/memberHelpers.html" as memberHelper -%}
-
-<section class="{$ doc.docType $}-overview">
-<code-example language="ts" hideCopy="true">{% for decorator in doc.decorators %}
-@{$ decorator.name $}({$ decorator.arguments $}){% endfor %}
-class {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
-{%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
-  <a class="code-anchor" href="#{$ member.anchor | urlencode $}">{$ memberHelper.renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor %}{% endif -%}
-{$ memberHelper.renderMembers(doc) $}
-}
-</code-example>
-</section>
diff --git a/aio/tools/transforms/templates/api/includes/export-as.html b/aio/tools/transforms/templates/api/includes/export-as.html
index a3fed860db1b..f003731da8f6 100644
--- a/aio/tools/transforms/templates/api/includes/export-as.html
+++ b/aio/tools/transforms/templates/api/includes/export-as.html
@@ -1,8 +1,21 @@
 {%- if doc.exportAs %}
 <section class="export-as">
-  <h2>Exported as</h2>
-  <div>
-    <code>{$ doc.exportAs $}</code>
-  </div>
+  <h2>Template variable references</h2>
+  <table class="is-full-width list-table export-as-table">
+    <thead>
+      <tr>
+        <th>Identifier</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      {%- for exportAs in doc.exportAsArray %}
+      <tr class="export-as">
+        <td><code>{$ exportAs $}</code></td>
+        <td><code>#myTemplateVar="{$ exportAs $}"</code></td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 </section>
 {% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/interface-overview.html b/aio/tools/transforms/templates/api/includes/interface-overview.html
index 7b2b8d6b063a..15df777c8ec0 100644
--- a/aio/tools/transforms/templates/api/includes/interface-overview.html
+++ b/aio/tools/transforms/templates/api/includes/interface-overview.html
@@ -6,5 +6,5 @@
 }
 </code-example>
 {$ descendants.renderDescendants(doc, 'interface', 'Child interfaces') $}
-{$ descendants.renderDescendants(doc, 'class', 'Class implementations') $}
+{$ descendants.renderDescendants(doc, 'class', 'Class implementations', true, r/class|directive|pipe|decorator/) $}
 </section>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/ngmodule.html b/aio/tools/transforms/templates/api/includes/ngmodule.html
index a3421b9bed8c..e28304ab55f6 100644
--- a/aio/tools/transforms/templates/api/includes/ngmodule.html
+++ b/aio/tools/transforms/templates/api/includes/ngmodule.html
@@ -1,4 +1,4 @@
-<h2>NgModules</h2>
+{% if doc.ngModules.length == 1 %}<h2>NgModule</h2>{% else %}<h2>NgModules</h2>{% endif %}
 <ul class="ngmodule-list">
 {% for ngModule in doc.ngModules %}
   <li>
diff --git a/aio/tools/transforms/templates/api/includes/selectors.html b/aio/tools/transforms/templates/api/includes/selectors.html
index 0e14513b3711..63c92ece55d7 100644
--- a/aio/tools/transforms/templates/api/includes/selectors.html
+++ b/aio/tools/transforms/templates/api/includes/selectors.html
@@ -1,9 +1,14 @@
 {%- if doc.selector %}
-<section class="selectors">
+<section class="selector-list">
   <h2>Selectors</h2>
-  <code-example hideCopy="true" class="no-box api-heading selector">
-  {%- for selector in doc.selector.split(',') %}
-  {$ selector $}{% endfor %}
-  </code-example>
+  {% if doc.selectors %}
+    {$ doc.selectors | marked $}
+  {% else %}
+  <ul>
+    {%- for selector in doc.selectorArray %}
+    <li><code>{$ selector | replace(r/(:not\([^()]+\))/g, '<i>$1</i>') $}</code></li>
+    {% endfor %}
+  </ul>
+  {% endif %}
 </section>
 {% endif %}
diff --git a/aio/tools/transforms/templates/api/lib/descendants.html b/aio/tools/transforms/templates/api/lib/descendants.html
index 73b097a1a9e8..4f78d6212bd6 100644
--- a/aio/tools/transforms/templates/api/lib/descendants.html
+++ b/aio/tools/transforms/templates/api/lib/descendants.html
@@ -1,22 +1,22 @@
-{% macro renderDescendantList(descendants, docType, recursed) %}
+{% macro renderDescendantList(descendants, descendantType, recursed, docTypeMatcher) %}
 {% if descendants.length %}
 <ul>
   {% for descendant in descendants %}
     <li>
       <code>{$ descendant.name $}</code>
-      {$ renderDescendantList(descendant.descendants | filterByPropertyValue('docType', docType), docType, recursed) $}
+      {$ renderDescendantList(descendant.descendants | filterByPropertyValue('docType', docTypeMatcher), docType, recursed, docTypeMatcher) $}
     </li>
   {% endfor %}
 </ul>
 {% endif %}
 {% endmacro -%}
 
-{%- macro renderDescendants(doc, docType, title='', recursed=true) %}
-  {% set descendants = doc.descendants | filterByPropertyValue('docType', docType) %}
+{%- macro renderDescendants(doc, descendantType, title='', recursed=true, docTypeMatcher=descendantType) %}
+  {% set descendants = doc.descendants | filterByPropertyValue('docType', docTypeMatcher) %}
   {% if descendants.length %}
-  <div class="descendants {$ docType $}">
+  <div class="descendants {$ descendantType $}">
     {% if title %}<h2>{$ title $}</h2>{% endif %}
-    {$ renderDescendantList(descendants, docType, recursed) $}
+    {$ renderDescendantList(descendants, descendantType, recursed, docTypeMatcher) $}
   </div>
   {% endif %}
 {% endmacro %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/lib/directiveHelpers.html b/aio/tools/transforms/templates/api/lib/directiveHelpers.html
deleted file mode 100644
index 937f02b891eb..000000000000
--- a/aio/tools/transforms/templates/api/lib/directiveHelpers.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% macro renderBindings(bindings, cssContainerClass, cssItemClass, title) -%}
-{% if bindings.length %}
-<section class="{$ cssContainerClass $}">
-  <h2>{$ title $}</h2>
-  {% for binding in bindings %}
-  <div class="{$ cssItemClass $}">
-    <code>{$ binding.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ binding.memberDoc.containerDoc.name $}.{$ binding.propertyName $}</code>
-    {#{$ binding.memberDoc.description | trimBlankLines | marked $}#}
-  </div>
-  {% endfor %}
-</section>
-{% endif %}
-{%- endmacro %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
index 08134a6499c9..476a77149a9d 100644
--- a/aio/tools/transforms/templates/api/lib/memberHelpers.html
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -28,12 +28,13 @@
 {%- endmacro -%}
 
 {%- macro renderMemberSyntax(member, truncateLines) -%}
+    {%- if member.boundTo %}<span class="property-binding">@{$ member.boundTo.type $}(
+    {%- if member.boundTo.propertyName != member.boundTo.bindingName %}'{$ member.boundTo.bindingName $}'{% endif -%}
+    )</span><br>{% endif -%}
     {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}
     {%- if member.isAbstract %}abstract {% endif -%}
     {%- if member.isStatic %}static {% endif -%}
-    {%- if (member.isGetAccessor or member.isReadonly) and not member.isSetAccessor %}get {% endif -%}
-    {%- if member.isSetAccessor and not member.isGetAccessor %}set {% endif -%}
-    {$ member.name $}{$ member.typeParameters | escape $}{% if not member.isGetAccessor %}{$ params.paramList(member.parameters, truncateLines) | trim $}{% endif %}
+    <span class="member-name">{$ member.name $}</span>{$ member.typeParameters | escape $}{% if not member.isGetAccessor %}{$ params.paramList(member.parameters, truncateLines) | trim $}{% endif %}
     {%- if member.isOptional  %}?{% endif -%}
     {$ params.returnType(member.type) | trim | truncateCode(truncateLines) $}
 {%- endmacro -%}
@@ -168,27 +169,28 @@ <h2>{$ headingText $}</h2>
 {%- endmacro -%}
 
 
-{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%}
+{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings, headingLevel = 2) -%}
 {% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
-{% set hasTypes = properties | hasValues('type') %}
 {% if nonInternalProperties.length -%}
 <section class="{$ containerClass $}">
-  <h2>{$ headingText $}</h2>
+  <h{$ headingLevel $}>{$ headingText $}</h{$ headingLevel $}>
   <table class="is-full-width list-table property-table">
     <thead>
       <tr>
         <th>{$ headings[0] or 'Property' $}</th>
-        {% if hasTypes %}<th>{$ headings[1] or 'Type' $}</th>{% endif %}
-        <th>{$ headings[2] or 'Description' $}</th>
+        <th>{$ headings[1] or 'Description' $}</th>
       </tr>
     </thead>
     <tbody>
     {% for property in nonInternalProperties %}
       <tr class="{$ propertyClass $}">
-        <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
-        {% if hasTypes %}<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>{% endif %}
+        <td>
+          <a id="{$ property.anchor $}"></a>
+          <code>{$ renderMemberSyntax(property) $}</code>
+        </td>
         <td>
           {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
+          {%- if property.isSetAccessor and not property.isGetAccessor %}<span class='write-only-property'>Write-only.</span>{% endif %}
           {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}
           {$ (property.description or property.constructorParamDoc.description) | marked $}
           {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
@@ -200,3 +202,27 @@ <h2>{$ headingText $}</h2>
 </section>
 {%- endif -%}
 {%- endmacro -%}
+
+{% macro renderDirectiveAncestors(doc, collectionName) %}
+{%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+{% set nonInternalMembers = ancestor.doc[collectionName] | filterByPropertyValue('internal', undefined) %}
+{% if nonInternalMembers.length -%}
+<section class="inherited-members-list">
+  <h3>Inherited from <code>{$ ancestor.doc.id $}</code></h3>
+  <ul>
+  {% for member in nonInternalMembers %}
+    <li>
+        <code><a class="code-anchor" href="{$ ancestor.doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member) $}</a></code>
+    </li>
+  {% endfor %}
+  </ul>
+</section>
+{% endif %}
+{$ renderDirectiveAncestors(ancestor.doc, collectionName) $}
+{% endif %}{% endfor -%}
+{% endmacro %}
+
+{% macro renderDirectiveProperties(doc, heading) %}
+{$ renderProperties(doc.properties, 'instance-properties', 'instance-property', heading) $}
+{$ renderDirectiveAncestors(doc, 'properties') $}
+{% endmacro %}
diff --git a/aio/tools/transforms/templates/api/package.template.html b/aio/tools/transforms/templates/api/package.template.html
index 73525bfeeaa6..2dab4b53bd81 100644
--- a/aio/tools/transforms/templates/api/package.template.html
+++ b/aio/tools/transforms/templates/api/package.template.html
@@ -8,10 +8,7 @@ <h3>{$ title $}</h3>
     <table class="is-full-width list-table">
       {% for item in filteredItems %}
       <tr>
-        <td><code class="code-anchor">
-          <a href="{$ overridePath or item.path $}"
-            {%- if item.deprecated != undefined %} class="deprecated-api-item"{% endif %}>{$ item.name $}</a></code>
-        </td>
+        <td><code class="code-anchor"><a href="{$ overridePath or item.path $}"{%- if item.deprecated != undefined %} class="deprecated-api-item"{% endif %}>{$ item.name $}</a></code></td>
         <td>
           {% if item.deprecated !== undefined %}{$ ('**Deprecated:** ' + item.deprecated) | marked $}{% endif %}
           {% if item.shortDescription %}{$ item.shortDescription | marked $}{% endif %}