build(docs-infra): display inherited members on directives (#25768)

PR Close #25768

aio/src/styles/2-modules/_api-pages.scss

@@ -104,8 +104,9 @@
   .ngmodule-list {
     list-style: none;
     padding: 0;
+  }
 
-  .selector-list {
+  .selector-list, .inherited-members-list {
     ul {
       padding: 0;
       li {

aio/tools/transforms/templates/api/directive.template.html

@@ -1,13 +1,37 @@
 {% import "lib/memberHelpers.html" as memberHelpers -%}
 {% extends 'class.template.html' -%}
 
+{% macro renderAncestorMembers(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 $}">{$ memberHelpers.renderMemberSyntax(member, 1) $}</a></code>
+    </li>
+  {% endfor %}
+  </ul>
+</section>
+{% endif %}
+{$ renderAncestorMembers(ancestor.doc, collectionName) $}
+{% endif %}{% endfor -%}
+{% endmacro %}
+
+{% macro renderProperties(doc, heading) %}
+{$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', heading) $}
+{$ renderAncestorMembers(doc, 'properties') $}
+{% endmacro %}
+
 {% block overview %}{% endblock %}
 
 {% block details -%}
   {% include "includes/ngmodule.html" %}
   {% include "includes/selectors.html" %}
 
-  {$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
+  {$ renderProperties(doc, 'Properties') $}
 
   {% include "includes/export-as.html" %}
 
@@ -22,6 +46,7 @@
   {$ 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') $}
+  {$ renderAncestorMembers(doc, 'methods') $}
   {% endblock %}
 
 {% block endNotes %}{% endblock %}

aio/tools/transforms/templates/api/includes/directive-overview.html

@@ -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>

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -168,11 +168,11 @@
 {%- endmacro -%}
 
 
-{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%}
+{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings, headingLevel = 2) -%}
 {% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
 {% 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>