fix(aio): do not show Properties/Methods sections if only internal members (#22471)

PR Close #22471

aio/tests/e2e/api.e2e-spec.ts

@@ -40,4 +40,14 @@ describe('Api pages', function() {
     const page = new ApiPage('api/common/HashLocationStrategy');
     expect(page.getOverview('class').getText()).toContain('path(includeHash: boolean = false): string');
   });
+
+  it('should show a "Properties" section if there are public properties', () => {
+    const page = new ApiPage('api/core/ViewContainerRef');
+    expect(page.getSection('instance-properties').isPresent()).toBe(true);
+  });
+
+  it('should not show a "Properties" section if there are only internal properties', () => {
+    const page = new ApiPage('api/forms/FormControl');
+    expect(page.getSection('instance-properties').isPresent()).toBe(false);
+  });
 });

aio/tests/e2e/api.po.ts

@@ -31,4 +31,8 @@ export class ApiPage extends SitePage {
   getOverview(docType) {
     return element(by.css(`.${docType}-overview`));
   }
+
+  getSection(cls) {
+    return element(by.css(`section.${cls}`));
+  }
 }

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

@@ -106,36 +106,40 @@
 {% endmacro -%}
 
 {%- macro renderMethodDetails(methods, containerClass, itemClass, headingText) -%}
-{% if methods.length %}
+{% set nonInternalMethods = methods | filterByPropertyValue('internal', undefined) %}
+{% if nonInternalMethods.length %}
 <section class="{$ containerClass $}">
   <h2>{$ headingText $}</h2>
-  {% for member in methods %}{% if not member.internal %}
+  {% for member in nonInternalMethods %}
     {$ renderMethodDetail(member, itemClass) $}
-  {% endif %}{% endfor %}
+  {% endfor %}
 </section>
 {% endif %}
 {%- endmacro -%}
 
 
 {%- macro renderProperties(properties, containerClass, propertyClass, headingText) -%}
-{%- if properties.length -%}
-<h2>{$ headingText $}</h2>
-<table class="is-full-width list-table properties-table">
-  <thead>
-    <tr><th>Property</th><th>Type</th><th>Description</th></tr>
-  </thead>
-  <tbody>
-  {% for property in properties %}{% if not property.internal %}
-    <tr class="{$ propertyClass $}">
-      <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
-      <td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>
-      <td>
-        {$ (property.description or property.constructorParamDoc.description) | marked $}
-        {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
-      </td>
-  </tr>
-  {% endif %}{% endfor %}
-  </tbody>
-</table>
+{% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
+{% if nonInternalProperties.length -%}
+<section class="{$ containerClass $}">
+  <h2>{$ headingText $}</h2>
+  <table class="is-full-width list-table properties-table">
+    <thead>
+      <tr><th>Property</th><th>Type</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+    {% for property in nonInternalProperties %}
+      <tr class="{$ propertyClass $}">
+        <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
+        <td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>
+        <td>
+          {$ (property.description or property.constructorParamDoc.description) | marked $}
+          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+</section>
 {%- endif -%}
 {%- endmacro -%}