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,26 +106,29 @@
 {% 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">
+{% 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 properties %}{% if not property.internal %}
+    {% 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>
@@ -134,8 +137,9 @@
           {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
         </td>
     </tr>
-  {% endif %}{% endfor %}
+    {% endfor %}
     </tbody>
-</table>
+  </table>
+</section>
 {%- endif -%}
 {%- endmacro -%}