chore(docs): adds toc to api docs (#7827)

Author: amcdnl

tools/dgeni/templates/class.template.html

@@ -1,4 +1,5 @@
-<h4 class="docs-api-h4 docs-api-class-name">
+<h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-name">
+  <span header-link="{$ class.name $}"></span>
   <code>{$ class.name $}</code>
 </h4>
 
@@ -16,7 +17,7 @@ <h4 class="docs-api-h4 docs-api-class-name">
 {%- endif -%}
 
 {%- if class.directiveExportAs -%}
-<span class="docs-api-h4 docs-api-class-export-label">Exported as:</span>
+<span class="docs-api-class-export-label">Exported as:</span>
 <span class="docs-api-class-export-name">{$ class.directiveExportAs $}</span>
 {%- endif -%}
 

tools/dgeni/templates/componentGroup.template.html

@@ -31,22 +31,31 @@ <h2>
   </p>
 
   {%- if doc.services.length -%}
-    <h3 class="docs-api-h3">Services</h3>
+    <h3 id="services" class="docs-header-link docs-api-h3">
+      <span header-link="services"></span>
+      Services
+    </h3>
     {% for service in doc.services %}
       {$ class(service) $}
     {% endfor %}
   {%- endif -%}
 
 
   {%- if doc.directives.length -%}
-    <h3 class="docs-api-h3">Directives</h3>
+    <h3 id="directives" class="docs-header-link docs-api-h3">
+      <span header-link="directives"></span>
+      Directives
+    </h3>
     {% for directive in doc.directives %}
       {$ class(directive) $}
     {% endfor %}
   {%- endif -%}
 
   {%- if doc.additionalClasses.length -%}
-    <h3 class="docs-api-h3">Additional classes</h3>
+    <h3 id="additional_classes" class="docs-header-link docs-api-h3">
+      <span header-link="additional_classes"></span>
+      Additional classes
+    </h3>
     {% for other in doc.additionalClasses %}
       {$ class(other) $}
     {% endfor %}

tools/gulp/tasks/docs.ts

@@ -91,7 +91,7 @@ task('markdown-docs', () => {
       const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
       return `
         <h${level} id="${escapedText}" class="docs-header-link">
-          <div header-link="${escapedText}"></div>
+          <span header-link="${escapedText}"></span>
           ${text}
         </h${level}>
       `;