chore(api): show exportAs name in documentation (#2433)

tools/dgeni/processors/categorizer.js

@@ -28,6 +28,7 @@ module.exports = function categorizer() {
               doc.classDoc.methods = [doc];
         } else if (isDirective(doc)) {
           doc.isDirective = true;
+          doc.directiveExportAs = getDirectiveExportAs(doc);
         } else if (isService(doc)) {
           doc.isService = true;
         } else if (isNgModule(doc)) {
@@ -117,6 +118,17 @@ function getDirectiveOutputAlias(doc) {
   return isDirectiveOutput(doc) ? doc.decorators.find(d => d.name == 'Output').arguments[0] : '';
 }
 
+function getDirectiveExportAs(doc) {
+  let metadata = doc.decorators
+      .find(d => d.name === 'Component' || d.name === 'Directive').arguments[0];
+
+  // Use a Regex to determine the exportAs metadata because we can't parse the JSON due to
+  // environment variables inside of the JSON.
+  let exportMatches = /exportAs\s*:\s*(?:"|')(\w+)(?:"|')/g.exec(metadata);
+
+  return exportMatches && exportMatches[1];
+}
+
 function hasMemberDecorator(doc, decoratorName) {
   return doc.docType == 'member' && hasDecorator(doc, decoratorName);
 }

tools/dgeni/templates/class.template.html

@@ -1,6 +1,11 @@
 <h3 class="docs-api-h3 docs-api-class-name">{$ class.name $}</h3>
 <p class="docs-api-class-description">{$ class.description $}</p>
 
+{%- if class.directiveExportAs -%}
+<span class="docs-api-h4 docs-api-class-export-label">Exported as:</span>
+<span class="docs-api-class-export-name">{$ class.directiveExportAs $}</span>
+{%- endif -%}
+
 {$ propertyList(class.properties) $}
 
 {$ methodList(class.methods) $}